内嵌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);    });