内嵌js代码为什么出现两个window.onload 出现问题了

Question

今天学习dom操作的时候在html代码里插入js代码，觉得代码长了就写了两个window.onload 方法，结果程序中的第一个window.onload 内的代码都无法执行，这是为什么？这里第一个window.onload代码无法执行了window.onload = function () {            console.log(document.childNodes)            var h1 = document.querySelector('#h1')            h1.addEventListener("click",function (event) {                h1.innerHTML = "hello"            })        }

Answer 1

准确来说，使用 window.onload 或者 xxx.onXXX 这样的形式监听事件，属于DOM0级事件，只能监听一次，后面的会把前面的覆盖掉。

你可以写两个函数，然后放在一个window.onload 中 ，比如 window.onload = function (){ func1();func2()},这样子才不会使得window.onload() 臃肿。

其次 可以使用DOM2级事件监听，使用 addEventListener，可执行多次同一事件

不过写成函数，在window的onload中运行多个函数还是王道

最简单的示例：

    window.onload = function () {

        console.log(1);

    }

    window.onload = function () {

        console.log(2);

    }

window.addEventListener("load",function(){

        console.log(1);

    });

    window.addEventListener("load",function(){

        console.log(2);

    });