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

Tout en travaillant avec les événements du navigateur, j'ai commencé à intégrer les touchEvents de Safari pour les appareils mobiles. Je trouve que les addEventListeners empilent avec des conditions. Ce projet ne peut pas utiliser JQuery.

Un écouteur d'événement 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);

JQuery bindpermet plusieurs événements, 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 JQuery? ex:

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

Toutes les suggestions ou conseils sont appréciés!

Dans POJS, vous ajoutez un auditeur à la fois. Il n'est pas courant d'ajouter le même écouteur pour deux événements différents sur le même élément. Vous pouvez é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(){…});

Espérons que cela montre le concept.

Modifier 25/02/2016

Le commentaire de Dalgard m'a amené à revoir cela. Je suppose que l'ajout du même auditeur pour plusieurs événements sur un élément est plus courant maintenant 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 soit, en soi , pas nécessairement un bonus). Extension avec les fonctions fléchées ECMAScript 2015:

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

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

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

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

Nettoyer la réponse d'Isaac:

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

ÉDITER

Fonction d'assistance ES6:

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

Pour moi; ce code fonctionne bien et 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.");
    });
}

ES2015:

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

J'ai une solution plus simple pour vous:

window.onload = window.onresize = (event) => {
    //Your Code Here
}

J'ai testé cela et cela fonctionne très bien, du côté positif, il est compact et simple comme les autres exemples ici.

AddEventListener prend une chaîne simple qui représente event.type . Vous devez donc écrire une fonction personnalisée pour itérer sur plusieurs événements.

Ceci est géré dans jQuery en utilisant .split (""), puis en parcourant la liste pour définir les eventListeners pour chacun types.

    // Add elem as a property of the handle function
    // This is to prevent a memory leak with non-native events in IE.
    eventHandle.elem = elem;

    // Handle multiple events separated by a space
    // jQuery(...).bind("mouseover mouseout", fn);
    types = types.split(" ");  

    var type, i = 0, namespaces;

    while ( (type = types[ i++ ]) ) {  <-- iterates thru 1 by 1

Une façon de le faire:

const troll = document.getElementById('troll');

['mousedown', 'mouseup'].forEach(type => {
	if (type === 'mousedown') {
		troll.addEventListener(type, () => console.log('Mouse is down'));
	}
        else if (type === 'mouseup') {
                troll.addEventListener(type, () => console.log('Mouse is up'));
        }
});

img {
  width: 100px;
  cursor: pointer;
}

<div id="troll">
  <img src="http://images.mmorpg.com/features/7909/images/Troll.png" alt="Troll">
</div>