带有参数的Javascript事件处理程序

Question

我想制作一个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);
}

Answer 1

你可以尝试使用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);

Answer 2

这是一个老生常谈的问题。让我在这里加上这个。

使用arrow函数语法，您可以以更简洁的方式实现它，因为它是词汇绑定的，并且可以链接。

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

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'));

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

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

Answer 3

我不完全理解您的代码试图做什么，但是您可以使用函数闭包的优点在任何事件处理程序中使变量可用：

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如何工作的更多信息，请参阅以下其他参考文献：

Javascript在匿名函数中包装代码

JavaScript中立即调用的函数表达式（IIFE）——传递jQuery

JavaScript自动执行匿名函数的好用例是什么？

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

// 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（）向回调添加参数。传递给. 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));