1_1：页面加载事件 [ window.onload ]

一 窗口 ( 页面 ) 加载事件

1）概念

// 1 window.onload 页面所有元素加载完触发 包含图片 脚本 css等
// 2 DOMContentLoaded 页面DOM树构建完成就触发 无需等待 css 图片 其他脚本
// 作用：JS脚本可以放在页面任何位置

2）代码范例

//onload 传统方式
<script>
    window.onload = function () {
        var btn = window.document.querySelector('button');
        btn.onclick = function () {
            alert(10);
        }
    }
</script>
<button>按钮</button>

//onload 监听事件方式
<script>
    window.addEventListener('load',function () {
        var btn = window.document.querySelector('button');
        btn.addEventListener('click',function () {
            alert(12);
        })
    });
</script>
<button>按钮</button>

//DOMContentLoaded只能用事件侦听方式
<script>
    window.addEventListener('DOMContentLoaded',function () {
        var btn = document.querySelector('button');
        btn.onclick = function () {
            alert(10);
        }
    })
</script>
<button>按钮</button>

3）window.onload 注意事项

// 1 传统方式只能写一次 如果有多个 以最后一个window.onload 为准
// 2 addEventListener 不存在覆盖的问题

4）DOMContentLoaded 特点

// 1 执行速度快 图片多的网站首选
// 2 IE9以上才支持

 

 适合图片很多的网站