带有参数的 Javascript 事件处理程序 [英] Javascript event handler with parameters

问题描述

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

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

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

addEventListener 怎么样?我似乎根本无法通过 addEventListener 传递事件，是吗?

更新

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

doClick = function(func){var that = this;this.element.onclick = 函数(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) {//这里的事件处理函数中，可以直接参考//从父函数参数到 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 有哪些好的用例自执行匿名函数?

最后一个版本可能更容易看出它的作用是这样的:

//在闭包中捕获参数时返回我们的事件处理程序函数handleEvent(passedInElement){返回函数(e){func(e,passedInElement);};}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));

这篇关于带有参数的 Javascript 事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！