情况有点像
var someVar = some_other_function();
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
问题是someVar的值在addEventListener的侦听器函数中是不可见的,在addEventListener中它可能被视为一个新变量。
情况有点像
var someVar = some_other_function();
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
问题是someVar的值在addEventListener的侦听器函数中是不可见的,在addEventListener中它可能被视为一个新变量。
当前回答
下面的代码为我工作良好(firefox):
for (var i=0; i<3; i++) {
element = new ... // create your element
element.counter = i;
element.addEventListener('click', function(e){
console.log(this.counter);
... // another code with this element
}, false);
}
输出:
0
1
2
其他回答
我建议你这样做:
var someVar = some_other_function();
someObj.addEventListener("click", (event, param1 = someVar) => {
some_function(param1);
}, false);
我的方法非常简单。这可能对其他人有用,就像它帮助了我一样。 它是…… 当你有多个元素/变量分配给同一个函数,你想要传递引用,最简单的解决方案是…
function Name()
{
this.methodName = "Value"
}
就是这样。 这对我很管用。 那么简单。
一个简单的方法就是这样
window.addEventListener('click', (e) => functionHandler(e, ...args));
对我有用。
如果以后想要删除事件侦听器,那么创建对curry函数的引用是一个不错的选择。
在下面的代码中,我将说明我的意思。
// This is the curry function. We return a new function with the signature of what the click-listener expects
const handleClick = (foo, bar) => (clickEvent) => {
console.log('we get our custom input', foo, bar);
console.log('we get the click event too', clickEvent);
}
// We need to store a reference to the listener, making sure we are removing the correct reference later
const myListener = handleClick('foo', 'bar'); // Remember that we now return the actual event-handler
const btn = document.getElementById('btn'); // find the element to attach the listener to
btn.addEventListener('click', myListener);
// remove the event listener like this by using our reference
btn.removeEventListener('click', myListener);
下面是CodePen上的一个工作示例
其他替代方法,可能没有bind的使用那么优雅,但它对于循环中的事件是有效的
for (var key in catalog){
document.getElementById(key).my_id = key
document.getElementById(key).addEventListener('click', function(e) {
editorContent.loadCatalogEntry(e.srcElement.my_id)
}, false);
}
它已经测试了谷歌chrome扩展和可能e.srcElement必须替换为e.srcElement在其他浏览器
我发现这个解决方案使用Imatoria发布的评论,但我不能标记为有用的,因为我没有足够的声誉:D