javascript - Javascript：将多个参数传递给 EventListener 和事件

Question

我想通过 .addEventListener 方法将 EventListener 添加到按钮。这是代码：

myElement[i].addEventListener('click', buttonLink);

这工作正常，它将事件作为值传递给方法。这是方法头：

function buttonLink(e) {
    //Now i can access the srcElement via:
    e.srcElement.id ...
}

问题是，如果我将参数传递给方法，它会隐藏 e 参数并且它在方法内完全不可见。有没有办法将我自己的值和（！）事件传递给 eventListener？

提前致谢

Answer 1

传递一个匿名函数addEventListener并从中调用回调：

myElement[i].addEventListener('click', function (e) {
    buttonLink(e, somethingElse, anotherThing);
});

Answer 2

下面我给出了两种传递函数参数的方法。两者都适用于addEventListener和removeListener：

方法一：包装函数：

let myElement = document.getElementById('myId');
function wrapperFunction(e) { 
    myFunction(e, 5, 9); //define your function and pass arguments(5,9)
}

myElement.addEventListener('event', wrapperFunction);
myElement.removeEventListener('event', wrapperFunction);

注意：“e”事件是从“addEventListener”函数中免费获得的。

方法2：卷曲

var myFunction = function (arg1, arg2) {
    return function curriedFunc(e) {
      myFunction(e, arg1, arg2); // define your function and pass arguments(5,9)
    };
};

let myElement = document.getElementById('myId');
let myRef = myFunction(5,9);
myElement.addEventListener('click', myRef);
myElement.removeEventListener('click', myRef);

Answer 3

来自https://www.codegrepper.com/code-examples/javascript/can+I+have+multiple+arguments+in+addEventListener：

var someEventHander=function(event,param1,param2)
{
    console.log(event,param1,param2);
}
//add listener
document.getElementById("someid").addEventListener('click',someEventHander.bind(event,'param1','param2'), false);

不过，这似乎不可用removeEventListener。