onload 加载事件

前面我们写过的代码中,JavaScript 代码都是在整个 HTML 代码后面的,这样是为了确保 HTML 页面中的所有 DOM 元素都加载完毕了,才能让 JavaScript 代码正确的执行,如果我们把 JavaScript 代码写在了 head 里面,就会导致 JavaScript 代码先执行了,而有些 DOM 元素还没初始化,最终 JavaScript 代码报错。要避免这种问题,我们可以使用 onload 加载事件来解决。

第一种方式

在 HTML 的 body 标签中添加一个 onload 事件,事件对应一个命名函数,当整个页面加载完毕后,运行该命名函数。以这样的方式来实现页面先加载,而 JS 代码后运行的效果。

<body onload="load()">
    <h2>DOM 操作</h2>
    <div class="container">
        .....
    </div>
</body>

第二种方式

在 JavaScript 代码中设置

<script>
    function load() {
        //....
        //....
    }
    window.onload = load;
</script>

也可以给 onload 指定一个匿名函数,让匿名函数来调用多个想调用的函数

<script>
    function load() {
        //....
        //....
    }
    function load2() {
        //....
        //....
    }
    window.onload = function() {
        load();
        load2(); 
    }
</script>

评论