window事件 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <title>Document</title>
 7   <script>
 8     // 当代码执行到这里的时候，div还没有杯渲染出来，所以这里找不到
 9     var box = document.getElementById('box')
10     console.log(box)
11 
12     window.onload = function () {
13       // window的load事件，页面加载完成以后才会执行的代码
14       var box = document.getElementById('box')
15       console.log(box)
16     }
17   </script>
18 </head>
19 <body style="height: 10000px;width: 10000px">
20   <div id="box">box</div>
21   <script>
22     // 滚动条滚轮事件
23     window.onscroll = function () {
24       // window.scrollTop有兼容性，直接取取不到
25       // 下面这句话就是获取滚动条高度的一个兼容写法
26       var top = document.documentElement.scrollTop || document.body.scrollTop
27       var left = document.documentElement.scrollLeft || document.body.scrollLeft
28 
29       console.log(top, left)
30     }
31 
32     // 窗口缩放事件
33     window.onresize = function () {
34       // 当窗口大小发生改变的时候触发的事件
35       console.log(window.innerWidth, window.innerHeight)
36     }
37 
38   </script>
39 </body>
40 </html>

 

posted @ 2020-04-16 23:42  strongerPian  阅读(217)  评论(0)    收藏  举报
返回顶端