1, window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数
下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有加载到按钮元素，无法执行 js 点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var btn=document.querySelector("button"); btn.onclick=function(){ alert("点击了"); } </script> </head> <body> <button>点击</button> </body> </html>
处理办法是：
window.onload = function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('点击我'); }) }
2，window.onload传统注册事件方式，只能写一次，如果有多个，会以最后一个window.onload为准
下面的代码，页面一加载，就会弹出“22", 然后再点击按钮，不能执行点击事件，无法弹出”点击我“
window.onload = function() { var btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('点击我'); }) } window.onload = function() { alert(22); }
解决方法：如果使用addEventListener 则没有限制
window.addEventListener('load' ,function(){ var btn=document.querySelector("button"); btn.onclick=function(){ alert("点击"); } }) window.addEventListener('load' , function(){ alert("22"); })
页面一加载，弹出”22“后，再点击按钮，又会弹出”点击“。
3，窗口加载事件：document.addEventListener( ' DOMContentLoaded ' , function(){})
DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。（IE9以上才支持）
如果页面的图片很多的话，从用户访问到 onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适。