是否允许多个元素都包含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));

});

结果:打开页面并单击任何按钮将运行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并重新加载页面

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 <9中的内存泄漏与onload监听器:我对问题的回答使用委托增加IE <9中
的事件原型