window 对象常见的事件

1.页面加载事件

　方式1：window.onload = function(){ }

　window.addEventListener('load',function(){ })

　window.onload 是窗口（页面）加载事件，当文档内容完全加载成功，就会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

　注意：

　　1.有了 window.pnload 就可以把JS代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

　　2.window .onload 传统注册事件方式只能写一次，如果有多个，会议最后一个 window.onload 为准。

　　3.如果使用 addEventListener 则没有限制

　方式2：document.addEventListener('DOMContentLoaded',function(){ })

　DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash等等。IE9以上才支持

　　注意：

　　　如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded 时间比较合适。

2.调整窗口大小事件

　window.onresize = function(){ }

　window.addEventLisener('load',function(){});

　window.onload 是调整窗口大小加载事件，当触发时就调用是处理函数

　注意：

　1.只要窗口大小发生像素变化就会触发这个事件

　2.经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕宽度。innerHeight 当前屏幕高度

3.定时器（两种方式）

　1.setTimeout( ) （方式一）

　　语法规范：window.setTimeout(调用函数，延时时间)；  // 这里的调用函数，也称作是回调函数  callback

　　1.这个 window 在调用时可以省略

　　2.这个延时时间单位是毫秒，可以省略不写，如果省略默认是0，立即执行

　　3.这个调用函数可以直接写函数（callback），还可以写函数名（‘callback( )’）

　　4.页面中可能有很多的定时器，我们经常给定时器加标识符（名字）区分

　　案例：（三种写法）

　　方式1：

　　　setTimeout(function(

　　　　　console.log('时间到了');

　　　){},3000)

　　方式2：

　　　function callback(){

　　　　　console.log('时间到');

　　　}

　　　var timer1 = setTimeout(callback,3000);

　　方式3：

　　　var timer2 = setTimeout('callback()',5000);    //不推荐使用

　2.setInterval( )（方式二）

　window.setInterval(回调函数，[ 间隔的毫秒 ])；

　setInterval( ) 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

　3.setTimeout 和 setInterval 的区别：

　　3.1 setTimeout  延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器

　　3.2 setInterout  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

2.清除定时器（两种方式）　

　1.clearTimeout（方式一）　

　　window.clearTimeout( timeoutID );  // window 也可以省略

　　里面的参数就是定时器的标识符
　　clearTimeout( ) 方法取消了之前通过调用 setTimeout( ) 建立的定时器

　　案例：

　　var timer = setTimeout(function(){

　　　　console.log('弹出来了');

　　},2000);

　　btn.addEventListener('click',function(){

　　　　clearTimeout( timer );

　　})

　　2.clearInterval( )（方式二）

　　var timer= null ;   // 设置成全局变量，才能在不同函数中使用

        btns[0].onclick=function(){

            timer=setInterval(function(){

                console.log('123');

            },1000);

        }

        btns[1].onclick=function(){

            clearInterval(timer);

        }