带参数的 Javascript 事件处理程序

我想做一个 eventHandler 来传递事件和一些参数.问题是该函数没有获取元素.这是一个例子:

doClick = function(func){var elem = ..//它所涉及的元素elem.onclick = 函数(e){函数(e，元素)；}}doClick(函数(e，元素){//处理元素和事件});

elem 必须在匿名函数之外定义.如何让传递的元素在匿名函数中使用?有没有办法做到这一点?

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

更新

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

doClick = function(func){var that = this;this.element.onclick = 函数(e){函数(e，那个)；}}

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

addEventListener

但我想知道 addEventListener:

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

解决方案

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

p>

function addClickHandler(elem, arg1, arg2) {elem.addEventListener('click', function(e) {//这里的事件处理函数中，可以直接引用//从父函数参数到 arg1 和 arg2}， 错误的);}

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

根据您的评论，如果您想要完成的是:

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

然后，您可以使用自执行函数 (IIFE) 来执行此操作，该函数在闭包执行时捕获您想要的参数并返回实际的事件处理函数:

element.addEventListener('click', (function(passedInElement) {返回函数(e){func(e，passedInElement)；};}) (this.elements[i]), false);

有关 IIFE 工作原理的更多信息，请参阅以下其他参考资料:

Javascript 在匿名函数中封装代码

JavaScript 中的立即调用函数表达式 (IIFE) -传递 jQuery

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

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

//在捕获闭包中的参数时返回我们的事件处理程序函数句柄事件(passedInElement){返回函数(e){func(e, passInElement);};}element.addEventListener('click', handleEvent(this.elements[i]));

<小时>

也可以使用 .bind() 为回调添加参数.您传递给 .bind() 的任何参数都将添加到回调本身将具有的参数之前.所以，你可以这样做:

elem.addEventListener('click', function(a1, a2, e) {//在事件处理程序中，您可以访问两个参数//和事件处理程序传递的事件对象}.bind(elem, arg1, arg2));

I want to make an eventHandler that passes the event and some parameters. The problem is that the function doesn't get the element. Here is an example:

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

The elem must be defined outside of anonymous function. How can i get the passed element to use within the anonymous function? Is there a way to do this?

And what about addEventListener? I don't seem to be able to pass the event through an addEventListener at all do I ?

Update

I seemed to fix the problem with 'this'

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

Where this contains this.element that i can access in the function.

The addEventListener

But i'm wondering about the addEventListener:

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

解决方案

I don't understand exactly what your code is trying to do, but you can make variables available in any event handler using the advantages of function closures:

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

Depending upon your exact coding situation, you can pretty much always make some sort of closure preserve access to the variables for you.

From your comments, if what you're trying to accomplish is this:

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

Then, you could do this with a self executing function (IIFE) that captures the arguments you want in a closure as it executes and returns the actual event handler function:

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

For more info on how an IIFE works, see these other references:

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?

This last version is perhaps easier to see what it's doing like this:

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

---

It is also possible to use .bind() to add arguments to a callback. Any arguments you pass to .bind() will be prepended to the arguments that the callback itself will have. So, you could do this:

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