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);
        }
原文地址:https://www.cnblogs.com/qtbb/p/11690352.html