将多个事件侦听器添加到一个元素 [英] adding multiple event listeners to one element

问题描述

所以我的困境是我不想两次写同一个代码。一次用于click事件，另一次用于 touchstart 事件。

以下是原始代码：

$ b $ pre $ document.getElementById（'first'）。addEventListener（'touchstart'，function（event）{
do_something（）;
}）;

document.getElementById（'first'）。addEventListener（'click'，function（event）{
do_something（）;
}）;


我如何压缩这个？有一个更简单的方法！

解决方案

也许你可以使用这样的辅助函数：

  //事件和参数的类型应该是Array 
 function addMultipleListeners（element，events，handler，useCapture，args）{
 if （！（events instanceof Array））{
 throw'addMultipleListeners：'+ 
'请提供一系列eventstrings'+ 
'（如[click，mouseover]）' ; 
 
 //创建一个可以使用附加参数的包装
 var handlerFn = function（e）{
 handler.apply（this，args&& args instanceof Array？args：[]）; 
} 
 for（var i = 0; i< events.length; i + = 1）{
 element.addEventListener（events [i]，handlerFn，useCapture）; 
} 
} 
 
函数处理程序（e）{
 //执行操作
}; 
 $ b //用法
 addMultipleListeners（
 document.getElementById（'first'），
 ['touchstart'，'click']，
处理函数， 
 false）; 
  

So my dilemma is that I don't want to write the same code twice. Once for the click event and another for the touchstart event.

Here is the original code:

document.getElementById('first').addEventListener('touchstart', function(event) {
    do_something();
    });

document.getElementById('first').addEventListener('click', function(event) {
    do_something(); 
    });

How can I compact this? There HAS to be a simpler way!

解决方案

Maybe you can use a helper function like this:

// events and args should be of type Array
function addMultipleListeners(element,events,handler,useCapture,args){
  if (!(events instanceof Array)){
    throw 'addMultipleListeners: '+
          'please supply an array of eventstrings '+
          '(like ["click","mouseover"])';
  }
  //create a wrapper to be able to use additional arguments
  var handlerFn = function(e){
    handler.apply(this, args && args instanceof Array ? args : []);
  }
  for (var i=0;i<events.length;i+=1){
    element.addEventListener(events[i],handlerFn,useCapture);
  }
}

function handler(e) {
  // do things
};

// usage
addMultipleListeners(
    document.getElementById('first'),
    ['touchstart','click'],
    handler,
    false);

这篇关于将多个事件侦听器添加到一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！