向EventListener和事件传递多个参数

Question

我想通过. addeventlistener方法为按钮添加一个EventListener。下面是代码:

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

这很好，它将事件作为值传递给方法。下面是method-head:

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

问题是，如果i传递参数给方法，它隐藏了参数e，它在方法中是完全不可见的。是否有一种方法来传递我自己的值和(!)事件到eventListener?

Thanks in advance

Answer 1

向addEventListener传递一个匿名函数，并从该函数中调用回调函数:

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

Answer 2

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

方法1:Wrapper函数:

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'函数免费提供的。

方法二:固化

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

From 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。