javascript - JavaScript 中的事件处理是如何工作的？

首先我很抱歉，因为我确信这个问题已经被问过很多次了，我只是不知道如何搜索这个问题。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>

        <form>
            <button type="button" onclick="hello()">test1</button>
            <button type="button" id="test2">test2</button>
            <h1 id='myText'></h1>

        <script type="text/javascript">
            function hello() {
                document.getElementById('myText').innerHTML = 'test1';
            }
            document.getElementById('test2').onclick = function(event) {
                document.getElementById('myText').innerHTML = 'test2';
            }   
        </script>
        </form>     
    </body>
</html>

这是我的代码。在此版本之前，整个脚本标签位于头部区域内，并且只有 test1工作过，test2什么也没做。

您能指出在哪里可以阅读到为什么会这样吗？
此外，这两种方法中是否有首选方法来触发事件？

最佳答案

这是处理元素的顺序。

简单来说:<head> 中的内容在 <body> 中的内容之前加载同样，在 <body> 顶部的内容将在 <body> 末尾的内容之前加载。因此，当您尝试获取 ID 为 test2 的元素时，您的 #test2事件处理程序仅在 #test2 时才起作用。按钮已在您的 <script> 之前加载;否则此时页面上根本不存在它。

关于javascript - JavaScript 中的事件处理是如何工作的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41956874/