[TOC] # 2.1窗口加载事件 //load等页面内容全部加载完毕，包含页面dom元素图片flash、CSS等等 // DOMContentLoaded 是DOM 加载完毕，不包含图片falsh css等就可以执行加载速度比load更快一些 ## 绑定事件 （新的事件 不要on） ~~~ window.onload = function() {} 或者 window.addEventListener ("load", function(){}) ; 开发常用 ~~~ window.onload是窗口(页面)加载事件当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。 **注意:** 1.有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。 2\. window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准。 （**传统注册事件 以最后一个为准）** 3.如果使用**addEventListener**则**没有限制****（这个侦听函数没有限制）** ## 开发常用窗口加载事件 （le9以止才支持） ~~~ document.addEventListener ( 'DOMContentLoaded' , function() {}) ~~~ DOMContentLoaded**事件触发时**,仅**当DOM加载完成**,不包括样式表,图片, flash等等。 le9以止才支持 如果**页面的图片很多的话**,从用户访问到onload触发可能需要较长的时间，交互效果就不能实现,必然影响用户的体验,此时**用DOMContentLoaded事件比较合适**。 # 2.2调整窗口大小事件 （window.onresize） ~~~ window.onresize = function() { } window.addEventListener (" resize", function() {}); ~~~ window.onresize是**调整窗口大小加载事件**,当**触发时**就**调用的处理函数**。 **注意:** 1.只要**窗口大小**发生**像素变化**,就会**触发这个事件**。 2.我们经常利用这个事件完成**响应式布局**。window.innerWidth 当前屏幕的宽度