js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

时间：2022-04-14 05:24:05

js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

一、总结

一句话总结：滚动事件scroll()，浏览器窗口调整监听resize()，思考好监听对象。

1、滚动事件scroll()的监听对象是谁？

window对象

        $(window).scroll(function(){

            //滚动条的距离scrollTop()和scrollLeft()

            $('#div1').text($(this).scrollTop())

        })

2、浏览器窗口调整监听resize()的监听对象是谁？

window对象

        $(window).resize(function(){

            alert('窗口大小改变了')

        })

3、如何监听窗口滚动？

scroll函数

        $(window).scroll(function(){

            //滚动条的距离scrollTop()和scrollLeft()

            $('#div1').text($(this).scrollTop())

        })

4、如何监听窗口改变？

resize函数

        $(window).resize(function(){

            alert('窗口大小改变了')

        })

二、监听鼠标滚动事件和窗口改变事件怎么写

1、相关知识

  • scroll() 当用户滚动滚动条时会发生 scroll 事件
  • resize() 当调整浏览器窗口的大小时，发生 resize 事件。
 

2、代码

<!DOCTYPE html>

<html lang="en">

<style>

</style>

<head>

    <meta charset="UTF-8">

    <title>演示文档</title>

    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <style type="text/css">

    body{height: 3000px}

    div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;}

    p{width: 50px;height:50px;background: green}

      </style>

</style>

</head>

<body>

<h3>jQuery事件对象</h3>

<div id="div1"><p></p></div>

<input id="btn1" type="button" value="事件对象">

<script type="text/javascript">

    $(function(){

        $(window).scroll(function(){

            //滚动条的距离scrollTop()和scrollLeft()

            $('#div1').text($(this).scrollTop())

        })

        $(window).resize(function(){

            alert('窗口大小改变了')

        })

    })

</script>

</body>

</html>
 

相关文章