BOM(1)页面加载事件

132 阅读1分钟

前一章我们知道bom的顶级对象是window,它是bom的核心对象 因此window有很多属性和方法 首先就是页面加载事件load 可什么是页面加载事件呢?顾名思义页面加载就是当整个文档加载完成后才执行的事件也就是说文档页面加载完成后(包括dom,css,图片等文件)才会执行的事件。 传统的页面加载事件的写法使用onload

<script>
        window.onload = function () {
            const btn = document.querySelector("button");
            btn.addEventListener("click", function () {
                alert("hello world");
            });
        }
    </script>

这种方法具有唯一性 因此我们一般会采用二级监听事件的写法。

<script>
        window.addEventListener("load", function () {
            const btn = document.querySelector("button");
            btn.addEventListener("click", function () {
                alert("hello world");
            });
        });
        // document.addEventListener("DomContentLoaded",function(){

        // })
    </script>

我们js代码一般写在dom的下面才能执行,如果写在上面代码是从上往下执行会找不到相应的dom元素 因此如果js写在上面的时候我们就需要用到页面加载事件 当然如果页面的图片等元素过多也可以用另一种方法DomContentLoaded方法此方法是当dom元素加载完成后执行的事件,执行速度比load快