JavaScrip BOM 窗口加载事件_综合

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

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，
再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
户的体验，此时用 DOMContentLoaded 事件比较合适。

这三种方式都是类似于给scrip最外层包裹了一层函数，前两个是window.开头，最后一个是document. 开头。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 传统会有冲突 ， 只能有一次// window.onload = function () {
    // var btn = document.querySelector ('button') ;// btn.onclick = function () {
    // alert('nihao') ;// }// }// window.onload = function () {
    // var btn = document.querySelector ('button') ;// btn.onclick = function () {
    // alert('nihao1') ;// }// }// 最新的方式window.addEventListener ('load' ,function () {
    var btn = document.querySelector ('button') ;btn.onclick = function () {
    alert('nihao2') ;}})// 不需要加载图片就可以document.addEventListener('DOMContentLoaded' , function () {
    alert('nihao3') ;})</script></head>
<body><button>点击</button>
</body>
</html>