是多个元素，每个元素都允许使用AddEventListener

Question

我只想在单击正确的按钮时才调用指定的函数。

function callback(func){
func();
}

主函数及其结果：

尝试A：

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('num1').addEventListener('click', callback(function1));
document.getElementById('num2').addEventListener('click', callback(function2));
});

结果：打开页面并单击任何按钮将运行功能1

尝试B：

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

结果：单击页面上的任何地方将运行功能1

尝试C：

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

结果：打开页面并单击按钮将运行函数1并重新加载页面

尝试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));
});

结果：单击页面上的任何地方将运行功能1

尝试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));

结果：打开页面并单击按钮将运行函数1并重新加载页面

Answer 1

当然，为什么不这样做。但是，查看您的代码，您可能会更好地委派事件：这并不难。基本上，请在DOM中聆听您需要的事件，其中包含每个元素的每个级别，并以一种方式编写处理程序，以便您检查启动事件的元素是否感兴趣，如果是这样，请进行：处理事件，如果没有，只需返回。
您还错过了addEventListener期望的第三个论点：布尔值，表明您在捕获阶段或冒泡阶段要处理活动的天气，或者在Quirksmode上阅读几篇文章，尤其是在不同的阶段

我还注意到您正在使用处理程序功能做奇怪的事情，您将遇到一些问题。基本上，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问题，查看代码，阅读我链接的文章，您很快就会解决。

将变更事件委派在IE中 - 棘手
避免在IE＆lt; 9中使用onload听众：我对问题的回答
使用委托

Answer 2

callback立即执行传递到其中的函数 - 因此它永远不会传递给addEventListener-而不是传递undefined。

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

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