Question

我是javaScript的新手，并且经历了各种将回调函数连接到事件的技术。

在将所有JS代码与html分开并连接window.onload块中的所有回调函数的技术中（Head First JavaScript强烈推荐，我正在遵循），onload事件的body元素的连线是不工作。

我期待两个警告框，其中Hii后面跟着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>

问题的第二部分;

在下面的代码中，我将onload元素的body移动到html代码本身，然后我只得到一个带Hii的警告框（正如预期的那样），但是{按钮上的{1}}事件无法按预期工作onlick的警告框。

Hello

这种不确定的行为令我不安。

Answer 1

window.onload的问题是它在body.onload事件后触发。这解释了为什么永远不会调用fun1：当您将onload事件处理程序附加到body标记时，该事件已经被触发 - 在您将处理程序附加到它之前。

改善这一点的一种方法是收听DOMContentLoaded事件。它将在body.onload事件之前触发。实际上，当您真正需要整个文档内容（包括要加载的图像）时，您只需要使用window.onload。 <{1}}将在此之前触发 - 当DOM树可用时。

所以这应该有效：

DOMContentLoaded

但实际上没有理由拥有一个单独的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();
    });
});

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

1 个答案: