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

问题描述

我想让一个eventHandler传递事件和一些参数。问题是函数没有得到元素。这里有一个例子：

  doClick = function（func）{
 var elem =这是关于
 elem.onclick = function（e）{
 func（e，elem）; 
} 
} 
 doClick（function（e，element）{
 //使用元素和事件
}）; 
  

'elem'必须在匿名函数之外定义。在匿名函数中如何获取传递的元素？有没有办法这样做？

AddEventListener怎么样？我似乎无法通过addEventListener传递事件吗？

更新

我似乎解决了'这个'的问题

  doClick = function（func）{
 var that = this; 
 this.element.onclick = function（e）{
 func（e，that）; 
} 
} 
  

其中包含我可以访问的的功能。

addEventListener

但我想知道addEventListener ：

  function doClick（elem，func）{
 element.addEventListener（'click'，func（event，elem ），false）; 
} 
  

解决方案

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

 函数addClickHandler（elem，arg1，arg2）{
 elem.addEventListener（'click'，function（e）{
 //在这里的事件处理函数中，可以直接引用
 // arg1和arg2来自父函数参数
}，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包装代码

即时调用的函数表达式（IIFE）在JavaScript中 - 传递jQuery

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

最后一个版本可能更容易看到它的作用如下：

  //返回我们的事件处理程序同时在闭包中获取一个参数
函数handleEvent（passedInElement）{
 return f unction（e）{
 func（e，passedInElement）; 
}; 
} 
 
 element.addEventListener（'click'，handleEvent（this.elements [i]））; 
  

---

还可以使用 .bind（） 为回调添加参数。您传递给 .bind（）的任何参数都将作为回调本身具有的参数。所以，你可以这样做：

  elem.addEventListener（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(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屋！