了解添加事件侦听器

时间:2014-08-28 03:51:28

标签: javascript addeventlistener

请帮助我理解为什么情景#1失败而情景#2有效。当我在div / id“box”元素上按下鼠标时,场景#2触发“textx”函数,而不是场景#1。我猜这个元素没有绑定到事件监听器,但为什么呢?什么是过程?提前谢谢。

场景#1:

 <script>

     function testx(e){  

          alert("test 123"); 
     }

     var boxTest = document.getElementById("box");

     boxTest.addEventListener("mousedown", testx, false);
     // Or this: boxTest.addEventListener("mousedown", function(e){ testx(e); }, false);

 </script>

场景#2:

 <script>

    function testx(e){  

        alert("test 123"); 

    }

    function setEvent() {

        var boxTest = document.getElementById("box");
        boxTest.addEventListener("mousedown", testx, false);

    }
    window.addEventListener("load", setEvent);

 </script>

1 个答案:

答案 0 :(得分:0)

您在方案1中的问题很可能是因为脚本运行时该元素不存在。在第二种情况下,脚本在尝试添加侦听器之前等待文档完全加载。

要解决此问题,请将第一个脚本元素移动到关闭正文标记之前(或者至少在元素的结束标记之后)并且可能会起作用。