0

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

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并重新加载页面

4

2 回答 2

5

当然，为什么不呢。但是，查看您的代码，您可能会更好地委派事件：这并不难。基本上，在 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 中
的事件原型的问题的回答

于 2012-10-30T15:51:01.717 回答
3

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

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

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

于 2012-10-30T15:50:42.680 回答