情况有点像
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中它可能被视为一个新变量。
当前回答
完美的解决方案是使用闭包,像这样:
function makeSizer(size) { return function () { document.body.style.fontSize = `${size}px`; }; } //pass parameters here and keep the reference in variables: const size12 = makeSizer(12); const size24 = makeSizer(24); const size36 = makeSizer(36); document.getElementById('size-12').addEventListener("click", size12); document.getElementById('size-24').addEventListener("click", size24); document.getElementById('size-36').addEventListener("click", size36); document.getElementById('remove-12').addEventListener("click", ()=>{ document.getElementById('size-12').removeEventListener("click", size12); alert("Now click on 'size 12' button and you will see that there is no event listener any more"); }); test<br/> <button id="size-12"> size 12 </button> <button id="size-24"> size 24 </button> <button id="size-36"> size 36 </button> <button id="remove-12"> remove 12 </button>
因此,基本上你将一个函数包装在另一个函数中,并将其分配给一个变量,你可以注册为事件侦听器,但也可以取消注册!
其他回答
您编写的代码绝对没有任何问题。some_function和someVar都应该是可访问的,以防它们在匿名的上下文中可用
function() { some_function(someVar); }
被创建。
检查警报是否为您提供了您一直在寻找的值,确保它可以在匿名函数的作用域内访问(除非您在addEventListener调用旁边有更多操作相同someVar变量的代码)
var someVar;
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
function. prototype.bind()是将目标函数绑定到特定作用域并可选地在目标函数中定义this对象的方法。
someObj.addEventListener("click", some_function.bind(this), false);
或者捕获一些词法范围,例如在循环中:
someObj.addEventListener("click", some_function.bind(this, arg1, arg2), false);
最后,如果目标函数中不需要this参数:
someObj.addEventListener("click", some_function.bind(null, arg1, arg2), false);
其他替代方法,可能没有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
你可以用'bind'绑定所有必要的参数:
root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));
通过这种方式,您将始终获得事件、arg1和其他传递给myPrettyHandler的东西。
http://passy.svbtle.com/partial-application-in-javascript-using-bind
另一种解决方法是使用数据属性
function func(){
console.log(this.dataset.someVar);
div.removeEventListener("click", func);
}
var div = document.getElementById("some-div");
div.setAttribute("data-some-var", "hello");
div.addEventListener("click", func);
斯菲德尔