Namespace vanilla Eventi JavaScript come in jQuery

Question

In jQuery, quando si imposta un evento, è possibile assegnare uno spazio ai nomi. Ciò significa (se lo desideri) che puoi avere più eventi di ridimensionamento della finestra, ad esempio, ed essere in grado di separarli singolarmente senza distaccare tutti gli eventi su quel selettore.

Esempio di jQuery namespacing:

$(window).on('scroll.myScrollNamespace, function() ...

mi chiedo come posso creare uno spazio dei nomi in pianura JavaScript. Questo, ovviamente, non avrebbe funzionato:

window.addEventListener('resize.myScrollNamespace', function() ...

Answer 1

Se invece di una funzione anonima:

window.addEventListener('resize', function() {...}); 

si utilizza una funzione denominata:

window.addEventListener('resize', function myScroll() {...}); 

allora si può essere in grado di utilizzare:

window.removeEventListener('resize', myScroll); 

Assicurarsi di avere myScroll in ambito. Quando si rimuove gli ascoltatori in un luogo diverso da quello di loro si aggiunge, forse si dovrebbe definire le funzioni in un certo ambito esterno e usare i loro nomi nel addEventListener nello stesso modo come nel removeEventListener:

function myScroll() { 
    // ... 
} 

window.addEventListener('resize', myScroll); 

window.removeEventListener('resize', myScroll); 

Se si desidera essere in grado di rimuovere più ascoltatori contemporaneamente, quindi sarà necessario memorizzarli in alcuni array e chiamare removeEventListener per ciascuno dei suoi elementi.

Vedere la documentazione EventTarget.removeEventListener().

Answer 2

Poiché la risposta @rsp risolve correttamente il problema di slegare il gestore corretto, in realtà non risponde al problema del namespace. Per gestire questo si avrebbe bisogno di fare un po 'più di codifica in questo modo:

function on(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.addEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

function off(elm, evtName, handler) { 
    evtName.split('.').reduce(function(evtPart, evt) { 
    evt = evt ? evt +'.'+ evtPart : evtPart; 
    elm.removeEventListener(evt, handler, true); 
    return evt; 
    }, ''); 
} 

// Your handler 
function onScroll(e) { ... } 

// To bind it 
on(window, 'scroll.myScrollNamespace', onScroll); 

// To unbind it 
off(window, 'scroll.myScrollNamespace', onScroll); 

Quindi per riassumere: questo imposta in realtà diversi listener di eventi - uno per ogni parte della vostra namespacing. Questa funzionalità purtroppo non è supportata in modo nativo, ma come puoi vedere può essere realizzata in modo relativamente semplice. Basta essere cauti sul fatto che anche se questo script supporta il deep namespacing (ad esempio scroll.parent.child) legherebbe molti ascoltatori di eventi (3 in questo caso), e quindi è sconsigliabile.

Si potrebbe fare questo più performante, ma questo è fatto.