带参数的Javascript事件处理程序

我想制作一个传递事件和一些参数的eventHandler。问题是函数没有得到元素。以下是一个例子：

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

“elem”必须在匿名函数之外定义。如何获取传递的元素以在匿名函数中使用？有办法做到这一点吗

那么addEventListener呢？我似乎根本无法通过addEventListener传递事件，是吗

更新

我似乎用“这个”解决了这个问题

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

其中包含我可以在函数中访问的this.element

addEventListener

但我想知道addEventListener：

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}

---

我不太明白您的代码到底想做什么，但您可以利用函数闭包的优点在任何事件处理程序中使用变量：

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

根据具体的编码情况，您几乎总是可以使用某种闭包为您保留对变量的访问

根据您的评论，如果您试图实现以下目标：

element.addEventListener('click', func(event, this.elements[i]))

然后，您可以使用自执行函数（IIFE）来实现这一点，该函数在闭包执行时捕获所需的参数，并返回实际的事件处理程序函数：

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

有关IIFE如何工作的更多信息，请参阅以下其他参考资料：

最后一个版本可能更容易看到它是这样做的：

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

---

还可以使用向回调添加参数。传递给

.bind（）

的任何参数都将在回调本身的参数前面。所以，你可以这样做：

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

---

这是
doThings
内部的窗口对象。请尝试以下方法：

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

您可以尝试使用bind方法，我认为这达到了您的要求。如果没有别的，它仍然非常有用

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);

鉴于对原始问题的更新，在传递事件处理程序时，上下文（“this”）似乎有问题。
基本知识在此处进行了解释

您的示例的简单工作版本如下：

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

另见
这是一个老问题，但很常见。让我在这里加上这个

使用可以更简洁地实现它，因为它是词汇绑定的，并且可以链接

arrow函数表达式是正则函数表达式的一种语法紧凑的替代方法，尽管它没有自己对this、arguments、super或new.target关键字的绑定

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

如果需要清理事件侦听器：

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

这里有一句疯狂的台词：

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

更温顺的版本：更适合任何理智的工作

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

简短答复:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
} 

你的问题涉及到元素，元素，元素。你能不能少一点困惑？很抱歉，我试图举例说明我的情况，但进展不顺利，我更新了代码。你会寻找
e.target
/
e.currentTarget
？如果我使用此选项，如何发送参数：ok.addEventListener（“单击”，this.changeText.bind（此））；是的，这几乎就是我想做的，但是如果匿名函数被addClickHandler作为参数传递，并且您想给这个函数一些带有事件的参数，比如：element.addEventListener（'click'，func（event，this.elements[i]）@sebas2day-您不能执行
element.addEventListener（'click'，func（事件，this.elements[i]）
。Javascript就是不能这样工作。还有其他的方法，使用闭包，但是你不能用你写的方法。addEventListener只使用一个参数（事件）调用它的回调，您不能以任何方式更改它。我在回答的末尾添加了另一个这样做的示例。@jfriend00您可以使用bind方法<代码>函数eventFunction（arg，evt）{console.log（arg[0]，arg[1]，arg[2]）console.log（evt）}var el=document.getElementById（'elementID'）；el.addEventListener（'click'，eventFunction.bind（el[1,2,3]））

注意，事件参数始终是函数参数中的最后一个，并且没有在bind方法中显式声明。@Bosh19-请参阅我在回答末尾添加的内容，以解释您所问的构造。它是一个立即调用的函数表达式（IIFE），本质上是一个立即执行的匿名声明函数。它是定义函数然后调用它的快捷方式-当您希望内联主体时很有用，它不会在其他任何地方调用，因此不需要名称。param也可以是回调函数（在-say-全局上下文中），因此可以很容易地回调，这似乎是一个合理的解决方案，但是当您必须删除同一个事件侦听器时，该怎么办？@SnnSnn:+1。我使用它向事件处理程序提供一个类属性。我刚刚传入了

这个

，处理程序可以访问它需要的内容。如果我的理解是正确的，您实际上将传递一个匿名函数作为您的事件处理程序：（e）=>{….}，而不是您的EventHandlerFunction（）。如果您希望稍后删除事件处理程序，这将导致问题，因为您首先传入了一个匿名函数？？？答案清楚地解释了如何删除事件侦听器，因此没有问题。这无法正常工作。如果每次设置事件处理程序时参数的值都发生更改，则会产生意外的结果，因为它不会超过

param1

或

param2

的值。如果这些值发生更改，则不会将其设置为创建事件处理程序时的值。它们将仅设置为当前值。此外，这与在事件侦听器函数的作用域之外设置一个变量并在事件处理程序中引用该变量没有什么不同，因此它根本无法完成参数的传递