将多个参数与事件对象一起传递给事件处理程序 [英] Pass multiple arguments along with an event object to an event handler

问题描述

如何不使用 Function.prototype.bind 将多个参数与事件对象一起传递给事件处理程序？

事件处理程序中有一个闭包。

下面的基本代码不起作用， p>

element.addEventListener（ click，eventHandler（eventObj + arguments），false）;

  function eventHandler（eventObj + arguments）{
 return function（）{}; //闭包
} 
  

我不知道如何传递事件对象和其他

更新：

我什至尝试在内部使用匿名函数addEventListener。这样做，似乎控件从未到达回调函数内部的闭包。

  element.addEventListener（ click， function（e）{
 var data = {'event'：e，'args'：arguments}; 
 eventHandler（data）; 
}，false）; 
 
 function eventHandler（data）{
 return function（）{//此函数从不执行
 console.log（JSON.stringify（data））; 
}; 
} 
  

解决方案

因此，如果我理解正确，您想要向元素添加事件侦听器，并配置添加侦听器时存在的其他数据，以便在调用该侦听器时将其传递给侦听器。如果您要这样做，则只需要适当关闭即可。假设您想将其他数据存储在对象中，例如：

  var extra_data = {one：一个，二：二}; 
 
 var make_handler =函数（额外数据）{
返回函数（事件）{
 //事件和extra_data将在此处提供
}; 
}; 
 
 element.addEventListener（ click，make_handler（extra_data））; 
  

How can one pass multiple arguments along with an event object to an event handler without using Function.prototype.bind?

The event handler has a closure in it.

The below basic code won't work,

element.addEventListener("click", eventHandler(eventObj + arguments), false);

function eventHandler(eventObj + arguments) {
  return function(){}; //a closure
}

I don't know how to pass event object and other arguments at the same time to an event handler.

Updated:

I have even tried using anonymous function inside addEventListener. Doing so, it seems that the control never reached to the closure inside the callback function.

element.addEventListener("click", function(e){
    var data = {'event':e, 'args':arguments};
    eventHandler(data);
  }, false);

function eventHandler(data) {
  return function(){  //this function is never executed
    console.log(JSON.stringify(data));
  };
}

解决方案

So if I understand correctly, you want to add an event listener to the element, and configure some additional data that exists at the time you're adding the listener to be passed to the listener when it's called. If that's what you want to do, you just need a proper closure. Something like this, assuming you want to store the additional data in an object:

var extra_data = {one: "One", two: "Two"};

var make_handler = function (extra_data) {
  return function (event) {
    // event and extra_data will be available here
  };
};

element.addEventListener("click", make_handler(extra_data));

这篇关于将多个参数与事件对象一起传递给事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！