webentwicklung-frage-antwort-db.com.de

Mehrere Ereignisse an einen Listener binden (ohne JQuery)?

Bei der Arbeit mit Browserereignissen habe ich begonnen, die touchEvents von Safari für mobile Geräte zu integrieren. Ich finde, dass addEventListeners sich mit Bedingungen aufstaut. Dieses Projekt kann JQuery nicht verwenden.

Ein Standard-Ereignislistener:

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

Die bind von JQuery erlaubt mehrere Ereignisse, wie zB:

$(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 dankbar!

110
johnkreitlow

In POJS fügen Sie jeweils einen Listener hinzu. Es ist nicht üblich, denselben Listener für zwei verschiedene Ereignisse in demselben Element hinzuzufügen. Sie könnten Ihre eigene kleine Funktion schreiben, um den Job auszuführen, 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 es das Konzept. 

Bearbeiten 2016-02-25

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

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

Eine ähnliche Strategie kann den gleichen Listener zu mehreren Elementen hinzufügen. Dies kann jedoch ein Indikator für die Delegierung von Ereignissen sein.

83
RobG

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

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

Isaacs Antwort aufräumen:

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

ES2015:

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

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

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

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

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

Ich habe dies getestet und funktioniert prima, auf der positiven Seite ist es kompakt und unkompliziert wie die anderen Beispiele hier.

2
user4891016

AddEventListener Nimm 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 wird und dann die Liste durchlaufen wird, um die eventListener für jede types festzulegen.

    // 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
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>
0
Reza Saadati