情况有点像
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中它可能被视为一个新变量。
当前回答
一个简单的方法就是这样
window.addEventListener('click', (e) => functionHandler(e, ...args));
对我有用。
其他回答
完美的解决方案是使用闭包,像这样:
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>
因此,基本上你将一个函数包装在另一个函数中,并将其分配给一个变量,你可以注册为事件侦听器,但也可以取消注册!
如果我没有弄错的话,使用bind调用函数实际上创建了一个由bind方法返回的新函数。这将在以后给你带来问题,或者如果你想删除事件监听器,因为它基本上就像一个匿名函数:
// Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', myCallback);
someObject.removeEventListener('event', myCallback);
// Not Possible:
function myCallback() { /* code here */ }
someObject.addEventListener('event', function() { myCallback });
someObject.removeEventListener('event', /* can't remove anonymous function */);
记住这一点。
如果你正在使用ES6,你可以按照建议做,但更干净一点:
someObject.addEventListener('event', () => myCallback(params));
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;)
}
我被困在这里,因为我在循环中使用它来查找元素并向它添加listner。如果你在循环中使用它,那么这将完美地工作
for (var i = 0; i < states_array.length; i++) {
var link = document.getElementById('apply_'+states_array[i].state_id);
link.my_id = i;
link.addEventListener('click', function(e) {
alert(e.target.my_id);
some_function(states_array[e.target.my_id].css_url);
});
}
为什么不直接从事件的目标属性获取参数呢?
例子:
const someInput = document.querySelector('button'); someInput。addEventListener('click', myFunc, false); someInput。myParam = '这是我的参数'; 函数myFunc (evt) { window.alert (evt.currentTarget.myParam); } <button class="input">显示参数</button>
JavaScript是一种面向原型的语言,记住!