Lier plusieurs événements à un écouteur (sans JQuery) ?

Question

En travaillant avec les événements du navigateur, j'ai commencé à incorporer les touchEvents de Safari pour les appareils mobiles. Je trouve que addEventListener s'empilent avec les conditionnels. Ce projet ne peut pas utiliser JQuery.

Un écouteur d'événements standard :

/* option 1 */
window.addEventListener('mousemove', this.mouseMoveHandler, false);
window.addEventListener('touchmove', this.mouseMoveHandler, false);

/* option 2, only enables the required event */
var isTouchEnabled = window.Touch || false;
window.addEventListener(isTouchEnabled ? 'touchmove' : 'mousemove', this.mouseMoveHandler, false);

L'approche de JQuery bind permet des événements multiples, comme ceci :

$(window).bind('mousemove touchmove', function(e) {
    //do something;
});

Existe-t-il un moyen de combiner les deux écouteurs d'événements comme dans l'exemple de JQuery ? ex :

window.addEventListener('mousemove touchmove', this.mouseMoveHandler, false);

Toute suggestion ou conseil est le bienvenu !

Answer 1

Une syntaxe compacte qui permet d'obtenir le résultat souhaité, POJS :

   "mousemove touchmove".split(" ").forEach(function(e){
      window.addEventListener(e,mouseMoveHandler,false);
    });

Answer 2

Dans POJS, vous ajoutez un écouteur à la fois. Il n'est pas courant d'ajouter le même listener pour deux événements différents sur le même élément. Vous pourriez écrire votre propre petite fonction pour faire le travail, par exemple :

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

addListenerMulti(window, 'mousemove touchmove', function(){…});

J'espère que cela montre le concept.

Modifier 2016-02-25

Le commentaire de Dalgard m'a amené à revoir cette question. Je suppose que l'ajout d'un même écouteur pour plusieurs événements sur un même élément est plus courant aujourd'hui pour couvrir les différents types d'interface utilisés, et la réponse d'Isaac offre une bonne utilisation des méthodes intégrées pour réduire le code (bien que moins de code ne soit pas nécessairement un bonus en soi). L'extension avec les fonctions de flèche ECMAScript 2015 donne :

function addListenerMulti(el, s, fn) {
  s.split(' ').forEach(e => el.addEventListener(e, fn, false));
}

Une stratégie similaire pourrait ajouter le même écouteur à plusieurs éléments, mais la nécessité de le faire pourrait être un indicateur de la délégation d'événements.

Answer 3

Je nettoie la réponse d'Isaac :

['mousemove', 'touchmove'].forEach(function(e) {
  window.addEventListener(e, mouseMoveHandler);
});

EDITAR

Fonction d'aide ES6 :

function addMultipleEventListener(element, events, handler) {
  events.forEach(e => element.addEventListener(e, handler))
}

Answer 4

ES2015 :

let el = document.getElementById("el");
let handler =()=> console.log("changed");
['change', 'keyup', 'cut'].forEach(event => el.addEventListener(event, handler));

Answer 5

Pour moi, ce code fonctionne bien et c'est le code le plus court pour gérer plusieurs événements avec les mêmes fonctions (en ligne).

var eventList = ["change", "keyup", "paste", "input", "propertychange", "..."];
for(event of eventList) {
    element.addEventListener(event, function() {
        // your function body...
        console.log("you inserted things by paste or typing etc.");
    });
}