anItem.addEventListener("click", iRespond, false);
问题是,我需要向 iRespond 传递一个参数,因为 iRespond 应该处理对许多项目的点击,我需要一种区分项目的方法。
我能怎么做?
anItem.addEventListener("click", iRespond, false);
问题是,我需要向 iRespond 传递一个参数,因为 iRespond 应该处理对许多项目的点击,我需要一种区分项目的方法。
我能怎么做?
简单的关闭:
var foo = "bar";
e.addEventListener('whee',function(evt){
iRespond(evt,foo);
},false);
当一个简单的闭包不起作用时(因为您正在锁定一个正在变化的变量,例如在循环中),您需要在该值上创建一个新的闭包:
foo.addEventListener('bar',(function(jim){
return function(evt){
iRespond(evt,jim); // Surprise surprise, jim is available here!
}
})(someValueToBeNamedJim), false);
例如:
var buttons = document.querySelectorAll('button');
for (var i=buttons.length;i--;)}
buttons[i].addEventListener('click',(function(j){
return function(){ alert("You clicked on button #"+j); };
})(i),false);
}
您可以毫无问题地选择在函数内部和外部将变量命名为相同的名称——例如使用i
而不是j
上面——但您可能会发现自己感到困惑。
似乎没有人提供最简单的解决方案。将您的其他函数调用放在匿名函数中,如下所示:
anItem.addEventListener("click", function() {
iRespond(your arg here);
}, false);
或者,在许多情况下,您可以只引用this
事件侦听器中的指针来查看您是从哪个对象调用的:
anItem.addEventListener("click", iRespond, false);
然后,在iRespond
:
function iRespond() {
// this points to the item that caused the event so you can
// determine which one you are processing and then act accordingly
// For example, this.id is the id of the object
}
有很多可能性。No1 将为它创建一个闭包。你也可以使用bind()
.
更好的解决方案可能是通过target
事件的属性来区分选项(每个项目),该属性也传递给侦听器。当您对许多项目只使用一个处理程序时,这将变得非常优雅,例如,将它添加到<ul>
而不是为每个<li>
元素添加一个处理程序。然后选择要做什么,例如通过目标元素的 id 或数据属性。