Mehrere Ereignisse an einen Listener binden (ohne JQuery)?

Während ich mit Browserereignissen arbeite, habe ich begonnen, Safari's touchEvents für mobile Geräte zu integrieren. Ich finde, dass sich addEventListeners mit Bedingungen stapeln. Dieses Projekt kann JQuery nicht verwenden.

Ein Standard-Ereignis-Listener:

/* 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's binderlaubt mehrere Ereignisse, wie zum Beispiel:

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

Gibt es eine Möglichkeit, die beiden Ereignis-Listener wie im JQuery-Beispiel zu kombinieren? Ex:

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

Anregungen oder Tipps sind willkommen!

In POJS fügen Sie jeweils einen Listener hinzu. Es ist nicht üblich, denselben Listener für zwei verschiedene Ereignisse auf demselben Element hinzuzufügen. Sie könnten Ihre eigene kleine Funktion schreiben, um die Arbeit zu erledigen, z.

/* 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(){…});

Hoffentlich zeigt es das Konzept.

Bearbeiten 2016-02-25

Dalgards Kommentar veranlasste mich, dies noch einmal zu überdenken. Ich denke, dass das Hinzufügen des gleichen Listeners für mehrere Ereignisse zu einem Element jetzt häufiger ist, um die verschiedenen verwendeten Schnittstellentypen abzudecken, und Isaacs Antwort bietet eine gute Verwendung integrierter Methoden, um den Code zu reduzieren (obwohl weniger Code für sich ist , nicht unbedingt ein Bonus). Die mit ECMAScript 2015 erweiterten Pfeilfunktionen bieten:

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

Eine ähnliche Strategie könnte denselben Listener zu mehreren Elementen hinzufügen, aber die Notwendigkeit, dies zu tun, könnte ein Indikator für die Ereignisdelegierung sein.

Eine kompakte Syntax, die das gewünschte Ergebnis erzielt, POJS:

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

Aufräumen von Isaacs Antwort:

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

BEARBEITEN

ES6-Hilfsfunktion:

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

Für mich; Dieser Code funktioniert einwandfrei und ist der kürzeste Code, um mehrere Ereignisse mit denselben (Inline-) Funktionen zu behandeln.

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

Ich habe eine einfachere Lösung für Sie:

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

Ich habe dies getestet und es funktioniert großartig. Auf der positiven Seite ist es kompakt und unkompliziert wie die anderen Beispiele hier.

AddEventListener verwendet eine einfache Zeichenfolge, die event.type darstellt . Sie müssen also eine benutzerdefinierte Funktion schreiben, um mehrere Ereignisse zu durchlaufen.

Dies wird in jQuery behandelt, indem .split ("") verwendet und dann die Liste durchlaufen wird, um die eventListeners für jede festzulegen 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

Ein Weg, wie es geht:

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>