是否允许多个元素都带有 addEventListener？答案

【问题标题】：Are multiple elements each with an addEventListener allowed?是否允许多个元素都带有 addEventListener？
【发布时间】：2012-10-31 00:02:02
【问题描述】：

我希望仅在单击正确的按钮时才调用指定的函数。

function callback(func){
func();
}

主要功能及其结果：

尝试 A：

document.addEventListener('DOMContentLoaded', function () {

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

结果：打开页面并点击任意按钮都会运行function1

尝试 B：

document.addEventListener('click', function () {

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

结果：点击页面任意位置会运行function1

尝试 C：

document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

结果：打开页面并点击按钮将运行function1并重新加载页面

尝试 D：

document.addEventListener('click', function () {

//The first ID doesn't exist
document.getElementById('imaginaryNum1').addEventListener('click', callback(function1));
document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

});

结果：点击页面任意位置会运行function1

尝试 E：

//The first ID doesn't exist
document.getElementById('imaginaryNum1').addEventListener('click', callback(function1));
document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));

结果：打开页面并点击按钮将运行function1并重新加载页面

【问题讨论】：

标签： javascript event-handling delegation

【解决方案1】：

当然，为什么不呢。不过，看看您的代码，您可能最好委派事件：it's not that hard。基本上，在 dom 中包含每个单独元素的级别上侦听所需的事件，并编写处理程序以检查触发事件的元素是否感兴趣，如果是：处理事件，如果没有，就返回。
您还缺少第三个参数，addEventListener 期望：一个布尔值，指示您要在捕获阶段或冒泡阶段处理事件的天气，read a couple of articles on quirksmode，特别是在 distinct phases

我还注意到您正在使用处理程序函数做一些奇怪的事情，您会遇到一些问题。基本上，addEventListener 期望的第二个参数是对函数的引用，您传递的是函数的返回值（在您的情况下未定义）。

function clickHandler(e)//accept event argument
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (!target.id.match(/num[0-9]/))
    {//the clicked element doesn't have num1, num2, num3... as id, no need to handle this event
        return e;
    }
    //handle event. target is a reference to the clicked element
}
document.body.addEventListener('click',clickHandler,false);//<-- just the function name, no parentheses

这就是你所需要的，一个可以处理所有点击事件的监听器。

这里有几个关于事件委托的 JS 问题，看看代码，阅读我链接的文章，你很快就会解决的。
delegating the change event in IE - - 棘手
avoid mem-leaks in IE<9 with onload listener：我对问题的回答
Augmenting the event prototype 在 IE

【讨论】：

好的。所以我添加了上面的内容： Uncaught TypeError: Cannot call method 'addEventListener' of null nonExtension05.html:120 (anonymous function)
您是否定义了一个名为clickHandler 的函数 - 并且您是否确保在此代码运行时加载了 DOM？如果不是：添加具有正确名称的函数，并使用我链接的问题的负载侦听器之一。另外：IEaddEventListener，如果您在该浏览器中进行测试，则必须依赖attachEvent。
非常感谢您为我指明了正确的方向。不过，这篇文章的一部分：davidwalsh.name/event-delegate。 :)

【解决方案2】：

callback 立即执行传递给它的函数 - 因此它永远不会传递给 addEventListener - 相反，undefined 被传递。

.addEventListener('someEvent', callback(functionN), false) 本质上是.addEventListener('someEvent', (function(){ functionN() })(), false)。

更改为 .addEventListener('someEvent', functionN, false) 看看会发生什么 - 如果您仍然遇到错误，请查看您的网络浏览器的脚本面板并查看正在生成的错误。

【讨论】：