Javascript 将回调函数连接到body元素失败的onload事件_Javascript_Html

Javascript 将回调函数连接到body元素失败的onload事件

javascript html

Javascript 将回调函数连接到body元素失败的onload事件,javascript,html,Javascript,Html,我是javaScript新手，正在学习将回调函数连接到事件的各种技术在将所有JS代码与html分离并连接window.onloadblock中所有回调函数的技术中（Head-First JavaScript强烈推荐，我遵循这一点），onload事件的body元素的连接不起作用我希望有两个警报框，一个是Hii，另一个是Hello（当我点击按钮时），但我只收到Hello（通过点击按钮），但在此之前我没有收到Hii警报框 <!DOCTYPE html> <html> <

我是javaScript新手，正在学习将回调函数连接到事件的各种技术

在将所有JS代码与html分离并连接

window.onload

block中所有回调函数的技术中（Head-First JavaScript强烈推荐，我遵循这一点），onload事件的body元素的连接不起作用

我希望有两个警报框，一个是

Hii

，另一个是

Hello

（当我点击按钮时），但我只收到Hello（通过点击按钮），但在此之前我没有收到

Hii

警报框

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        function fun1 () {
            alert("Hii");
        }

        function fun2 () {
            alert("hello");
        }

        window.onload = function () {
            document.getElementsByTagName('body')[0].onload = function () {
                fun1();
            };

            document.getElementById('btn1').onclick = function () {
                fun2();
            };
        };
    </script>
</head>
<body>
    <input type="button" id="btn1" value="Click">
</body>
</html>

这种不确定的行为困扰着我。

window.onload的问题在于它在

body.onload事件后触发。这解释了为什么从不调用fun1
：当您将onload
事件处理程序附加到body
标记时，在您将处理程序附加到它之前，该事件已经被触发
对此进行改进的一种方法是监听DOMContentLoaded
事件。它将在body.onload
事件之前触发。事实上，当您确实需要加载整个文档内容（包括要加载的图像）时，应该只需要使用window.onload
DOMContentLoaded
将在此之前触发——当DOM树可用时
因此，这应该是可行的：
document.addEventListener('DOMContentLoaded', function () {
    document.body.onload = function () {
        fun1();
    };

    document.getElementById('btn1').onclick = function () {
        fun2();
    };
});

但实际上没有理由有一个单独的body.onload
处理程序。你不妨这样做：
document.addEventListener('DOMContentLoaded', function () {
    fun1(); // call it when the DOM content is loaded.

    document.getElementById('btn1').onclick = function () {
        fun2();
    };
});

而且。。。使用addEventListener
分配事件处理程序是最佳做法，因为它允许为同一事件附加多个处理程序，因此不同的脚本不必在这方面相互干扰：
document.addEventListener('DOMContentLoaded', function () {
    fun1(); // call it when the DOM content is loaded.

    document.getElementById('btn1').addEventListener('click', function () {
        fun2();
    });
});

当您在事件处理程序中只执行一个函数时，可以采用一条捷径：与其将该调用包装在匿名函数中，不如将该函数本身作为引用传递：
document.addEventListener('DOMContentLoaded', function () {
    fun1(); // call it when the DOM content is loaded.

    document.getElementById('btn1').addEventListener('click', fun2);
});

document.addEventListener('DOMContentLoaded', function () {
    fun1(); // call it when the DOM content is loaded.

    document.getElementById('btn1').addEventListener('click', fun2);
});