情况有点像
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中它可能被视为一个新变量。
当前回答
其他替代方法,可能没有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
其他回答
向eventListener的回调函数发送参数需要创建一个隔离函数并将参数传递给该隔离函数。
这里有一个很好的辅助函数。基于上面“hello world”的例子。)
还有一件事是维护对函数的引用,这样我们就可以干净地删除侦听器。
// Lambda closure chaos.
//
// Send an anonymous function to the listener, but execute it immediately.
// This will cause the arguments are captured, which is useful when running
// within loops.
//
// The anonymous function returns a closure, that will be executed when
// the event triggers. And since the arguments were captured, any vars
// that were sent in will be unique to the function.
function addListenerWithArgs(elem, evt, func, vars){
var f = function(ff, vv){
return (function (){
ff(vv);
});
}(func, vars);
elem.addEventListener(evt, f);
return f;
}
// Usage:
function doSomething(withThis){
console.log("withThis", withThis);
}
// Capture the function so we can remove it later.
var storeFunc = addListenerWithArgs(someElem, "click", doSomething, "foo");
// To remove the listener, use the normal routine:
someElem.removeEventListener("click", storeFunc);
下面的方法对我很有效。从这里修改。
函数回调(theVar) { 返回函数(){ theVar (); } } 函数some_other_function() { document.body.innerHTML += "made it."; } var someVar = some_other_function; . getelementbyid(“按钮”)。addEventListener(“点击”,回调(someVar)); <!DOCTYPE html > < html > 身体< > <button type="button" id="button">点击我!< / >按钮 < /身体> < / html >
一种方法是用一个外部函数:
elem.addEventListener('click', (function(numCopy) {
return function() {
alert(numCopy)
};
})(num));
这种将匿名函数包装在圆括号中并立即调用它的方法称为IIFE(立即调用函数表达式)。
您可以在http://codepen.io/froucher/pen/BoWwgz中查看带有两个参数的示例。
catimg.addEventListener('click', (function(c, i){
return function() {
c.meows++;
i.textContent = c.name + '\'s meows are: ' + c.meows;
}
})(cat, catmeows));
2019年,很多api发生了变化,最好的答案不再有效,没有修复错误。
分享一些工作代码。
受到以上所有答案的启发。
button_element = document.getElementById('your-button')
button_element.setAttribute('your-parameter-name',your-parameter-value);
button_element.addEventListener('click', your_function);
function your_function(event)
{
//when click print the parameter value
console.log(event.currentTarget.attributes.your-parameter-name.value;)
}
下面的代码为我工作良好(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