logo标签列表

JavaScript中的addEventListener无法工作

javascript
25

我正在学习addEventListener，我尝试了一个例子但它却不起作用。有人可以告诉我我做错了什么吗？

<html>
<head>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }

    document.getElementById("id1").addEventListener("click", click_handler1, false);
    document.getElementById("id2").addEventListener("click", click_handler2, false);

//window.addEventListener("load", setup, false);
</script>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
</body>
</html>

感谢

将EventListeners放在window.onload函数中。 - David Corbin
3个回答
30

由于在添加元素之前执行了JavaScript，因此无法找到您的元素。 尝试将脚本移动到body底部：

<html>
<head>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }

    document.getElementById("id1").addEventListener("click", click_handler1, false);
    document.getElementById("id2").addEventListener("click", click_handler2, false);

//window.addEventListener("load", setup, false);
</script>
</body>
</html>
或者将代码放在 window.onload 事件中，或者使用 defer。 - 27px
12

将此内容移至文档末尾，或将其包装在 onload 函数中：

window.addEventListener('load',function(){
    document.getElementById("id1").addEventListener("click", click_handler1, false);
    document.getElementById("id2").addEventListener("click", click_handler2, false);
});

你的代码无法工作是因为DOM尚未准备好，而你已经尝试获取id1和id2。

2

您的代码在控制台中会抛出以下错误： Uncaught TypeError: Cannot call method 'addEventListener' of null 这说明您需要先定义HTML元素（本例中为anchor），然后再调用其方法。

您现在所做的是 - 先调用方法（本例中为addEventListener），然后稍后再定义HTML元素（本例中为anchor）。

    <html>
    <head></head>
    <body>
    <a id="id1">some crap</a><br>
    <a id="id2">crap</a>
    <script type="text/javascript">
     function click_handler1() { alert("click_handler1"); }
     function click_handler2() { alert("click_handler2"); }

     document.getElementById("id1").addEventListener("click", click_handler1);
     document.getElementById("id2").addEventListener("click", click_handler2);
    </script>
    </body>
    </html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接