带参数的 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 传递事件，对吗？

更新

我似乎用'this'解决了这个问题

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

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

添加事件监听器

但我想知道 addEventListener:

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

Answer 1

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

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 wrapping code inside anonymous function

Immediately-Invoked Function Expression (IIFE) In JavaScript - Passing jQuery

What are good use cases for JavaScript self executing anonymous functions?

最后一个版本可能更容易看到它在做什么:

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