Binden mehrerer Ereignisse an einen Listener (ohne JQuery)?

Während der Arbeit mit browser-events, die ich angefangen habe, die Einbeziehung von Safari touchEvents für mobile Geräte. Ich finde, dass addEventListeners stapeln sich mit Bedingungen. Dieses Projekt nicht verwenden JQuery.

Einem 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 bind ermöglicht es, mehrere Veranstaltungen, etwa so:

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

Gibt es eine Möglichkeit die beiden zu verbinden-event-Listener, wie in dem JQuery-Beispiel? ex:

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

Irgendwelche Vorschläge oder Tipps sind willkommen!

InformationsquelleAutor der Frage johnkreitlow | 2012-01-10

  1. 73

    In POJS, fügen Sie einen listener in einer Zeit. Es ist nicht üblich, fügen Sie den gleichen listener für zwei unterschiedliche Veranstaltungen auf das gleiche element. Sie schreiben eine eigene kleine Funktion, die Arbeit zu tun, z.B.:

    /* 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 er das Konzept.

    Bearbeiten 2016-02-25

    Dalgard Kommentar hat mich zum überdenken dieser. Ich denke, das hinzufügen von den gleichen listener für mehrere Ereignisse auf das eine element ist häufiger nun auf die unterschiedlichen interface-Typen im Einsatz, und Isaac die Antwort bietet eine gute Nutzung der built–in Methoden zur Verringerung der code (wenn auch weniger code ist, der sich, nicht unbedingt einen bonus). Erweitert mit ECMAScript 2015 Pfeil-Funktionen:

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

    Eine ähnliche Strategie könnte hinzufügen, die denselben listener auf mehrere Elemente, aber die Notwendigkeit, dies zu tun könnte ein Indikator für event delegation.

    InformationsquelleAutor der Antwort RobG

  2. 83

    Einige kompakte syntax, erreicht das gewünschte Ergebnis, POJS:

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

    InformationsquelleAutor der Antwort Isaac

  3. 20

    Reinigung Isaac ' s Antwort:

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

    InformationsquelleAutor der Antwort pmrotule

  4. 9

    ES2015:

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

    InformationsquelleAutor der Antwort ChrisTheButcher

  5. 8

    Für mich; dieser code funktioniert einwandfrei und ist die kürzeste code, um mehrere Ereignisse mit derselben (inline -) Funktionen.

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

    InformationsquelleAutor der Antwort user3796876

  6. 3

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

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

    Ich habe getestet dieses eine, es funktioniert großartig, auf der plus-Seite, es ist kompakt und unkompliziert wie die anderen Beispiele hier.

    InformationsquelleAutor der Antwort lillypad

  7. 1

    AddEventListener nehmen Sie eine einfache Zeichenfolge, stellt event.geben. So benötigen Sie zum schreiben eines benutzerdefinierten Funktion zum iterieren über mehrere Veranstaltungen.

    Diese behandelt werden, in jQuery mithilfe .split(" ") und dann die Iteration über die Liste zu setzen, die eventListeners für jeden 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

    InformationsquelleAutor der Antwort Selvakumar Arumugam

Schreibe einen Kommentar