Associazione di più eventi a un listener (senza JQuery)?

Question

Mentre lavoravo con gli eventi del browser, ho iniziato a incorporare i touchEvents di Safari per i dispositivi mobili. Trovo che addEventListener s si accumulano con condizionali. Questo progetto non può utilizzare JQuery.

Un ascoltatore di eventi 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); 

di JQuery bind consente a più eventi, in questo modo:

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

C'è un modo per unire le due listener di eventi come nell'esempio JQuery? ex:

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

Qualsiasi suggerimento o suggerimento è apprezzato!

Answer 1

In POJS, si aggiunge un ascoltatore alla volta. Non è comune aggiungere lo stesso listener per due eventi diversi sullo stesso elemento. Potresti scrivere la tua piccola funzione per fare il lavoro, ad esempio

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

Speriamo che mostri il concetto.

Modifica 2016-02-25

commento di Dalgard mi ha fatto rivedere questo. Suppongo che aggiungere lo stesso listener per più eventi su un elemento sia più comune ora per coprire i vari tipi di interfaccia in uso, e la risposta di Isaac offre un buon uso dei metodi incorporati per ridurre il codice (anche se meno codice è di per sé , non necessariamente un bonus). Estesa con ECMAScript 2015 funzioni di direzione dà:

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

Una strategia simile potrebbe aggiungere lo stesso ascoltatore a più elementi, ma la necessità di fare questo potrebbe essere un indicatore per la delega evento.

Answer 2

AddEventListener prendere una stringa semplice che rappresenta event.type. Quindi è necessario scrivere una funzione personalizzata per iterare su più eventi.

Questo viene gestito in jQuery utilizzando .split ("") e quindi iterando sull'elenco per impostare gli eventListeners per ogni 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 

Answer 3

Alcuni sintassi compatta che consente di ottenere il risultato desiderato, POJS:

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

Answer 4

Per me; questo codice funziona correttamente ed è il codice più breve per gestire più eventi con le stesse funzioni (in linea).

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

Answer 5

ES2015:

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

Answer 6

Ripulire la risposta di Isacco:

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

Answer 7

ho una soluzione più semplice per voi:

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

Ho provato questo un si Funziona alla grande, il lato positivo è compatto e non comune come gli altri esempi qui.