将多个事件侦听器添加到一个元素

Question

所以我的两难是我不想两次写同一个代码。一次用于点击事件，另一次用于事件touchstart。

这里是原代码：

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

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

我怎么能压缩呢？有一个更简单的方法！

Answer 1

也许你可以使用一个辅助功能是这样的：

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

Answer 2

您可以定义一个函数并传递它。匿名函数在任何方面都不是特殊的，所有函数都可以作为值传递。

var elem = document.getElementById('first'); 

elem.addEventListener('touchstart', handler, false); 
elem.addEventListener('click', handler, false); 

function handler(event) { 
    do_something(); 
} 

Answer 3

除非你do_something功能实际上不会与任何给定的参数的东西，你可以把它作为事件处理程序。

var first = document.getElementById('first'); 
first.addEventListener('touchstart', do_something, false); 
first.addEventListener('click', do_something, false); 

Answer 4

对于大量事件，这可能帮助：

var element = document.getElementById("myId"); 
var myEvents = "click touchstart touchend".split(" "); 
var handler = function (e) { 
    do something 
}; 

for (var i=0, len = myEvents.length; i < len; i++) { 
    element.addEventListener(myEvents[i], handler, false); 
} 

更新06/2017：

现在，新的语言功能有更广泛的应用，你可以简化添加的有限列表共享一个听众的事件。

const element = document.querySelector("#myId"); 

function handleEvent(e) { 
    // do something 
} 
// I prefer string.split because it makes editing the event list slightly easier 

"click touchstart touchend touchmove".split(" ") 
    .map(name => element.addEventListener(name, handleEvent, false)); 

如果要处理大量的事件，并且每个听者不同的要求，你也可以pass an object其中大多数人往往忘记。

const el = document.querySelector("#myId"); 

const eventHandler = { 
    // called for each event on this element 
    handleEvent(evt) { 
     switch (evt.type) { 
      case "click": 
      case "touchstart": 
       // click and touchstart share click handler 
       this.handleClick(e); 
       break; 
      case "touchend": 
       this.handleTouchend(e); 
       break; 
      default: 
       this.handleDefault(e); 
     } 
    }, 
    handleClick(e) { 
     // do something 
    }, 
    handleTouchend(e) { 
     // do something different 
    }, 
    handleDefault(e) { 
     console.log("unhandled event: %s", e.type); 
    } 
} 

el.addEventListener(eventHandler); 

Answer 5

我知道这是一个老问题，但我认为有些人可能会发现这种方法非常有用;它可以被应用到任何类似的重复代码：

ES6

['click','ontouchstart'].forEach(evt => 
    element.addEventHandler(evt, dosomething, false) 
); 

ES5

['click','ontouchstart'].forEach(function(evt) { 
    element.addEventHandler(evt, dosomething, false); 
});