Ajoutant plusieurs auditeurs d'événements à un élément

Peut-être que vous pouvez utiliser une fonction helper comme ceci:

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

À moins que votre fonction de do_something n'ait réellement fait quelque chose avec des arguments donnés, vous pouvez simplement le transmettre en tant que gestionnaire d'événements.

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

Vous pouvez simplement définir une fonction et la passer. Les fonctions anonymes ne sont pas spéciales en aucune façon, toutes les fonctions peuvent être transmises en tant que valeurs.

 var elem = document.getElementById('first'); elem.addEventListener('touchstart', handler, false); elem.addEventListener('click', handler, false); function handler(event) { do_something(); } 

Je sais que c'est une vieille question, mais je pensais que certains pourraient trouver cette approche utile; Il pourrait être appliqué à tout code similaire répétitif:

ES6

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

ES5

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

Pour un grand nombre d'événements, cela pourrait aider:

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

Mise à jour 06/2017:

Maintenant que les nouvelles fonctionnalités de langue sont plus largement disponibles, vous pouvez simplifier l'ajout d'une liste limitée d'événements qui partagent un auditeur.

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

Si vous souhaitez gérer de nombreux événements et avoir différentes exigences par auditeur, vous pouvez également transmettre un objet que la plupart des gens ont tendance à oublier.

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