Question

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

<!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什么也没做。

你能指点我在哪里读到为什么会这样吗？
另外，是否有两种方法可以触发事件？

Answer 1

这是元素处理的顺序。

用非常简单的术语来说：<head>中的内容会在<body>中的内容之前加载，同样，<body>顶部的内容会在<body>末尾的内容之前加载}}。出于这个原因，当您尝试获取ID为 test2 的元素时，#test2事件处理程序仅在您的#test2按钮加载之前有效。 <script>;否则它此时就不存在于页面上。

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

1 个答案: