Namespace vanilla JavaScript events podobnie jak w jQuery

Question

W jQuery, po ustawieniu zdarzenia, możesz go nazwać przestrzenią. Oznacza to (jeśli chcesz), że możesz na przykład mieć wiele zdarzeń związanych ze zmianą rozmiaru okna i mieć możliwość oddzielenia ich pojedynczo bez odrywania wszystkich zdarzeń na tym selektorze.

Przykład jQuery przestrzeni nazw:

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

Zastanawiam się w jaki sposób można stworzyć przestrzeń nazw w zwykły JavaScript. To oczywiście nie będzie działać:

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

Answer 1

Jeśli zamiast anonimowego funkcję:

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

użyć nazwanego funkcję:

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

następnie możesz mieć możliwość korzystania z:

window.removeEventListener('resize', myScroll); 

Upewnij się, że masz zakres myScroll. Po usunięciu słuchaczy w innym miejscu niż ich dodawanie, może należy zdefiniować swoje funkcje w jakimś zewnętrznym zakresu i korzystania z ich nazw w addEventListener w taki sam sposób jak w removeEventListener:

function myScroll() { 
    // ... 
} 

window.addEventListener('resize', myScroll); 

window.removeEventListener('resize', myScroll); 

Jeśli chcesz być w stanie usunąć wielu słuchaczy naraz, wtedy będziesz musiał je przechowywać w pewnej tablicy i wywołać metodę removeEventListener dla każdego z jej elementów.

Zobacz dokumentację EventTarget.removeEventListener().

Answer 2

Jako że odpowiedź @ rsp prawidłowo rozwiązuje problem odłączenia poprawnego programu obsługi, nie rozwiązuje ona w rzeczywistości problemu z wyświetlaniem nazw. Aby to obsługiwać będzie trzeba zrobić trochę więcej kodowanie tak:

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

Więc Podsumowując: to faktycznie ustawia kilka detektorów zdarzeń - po jednym dla każdej części przestrzeni nazw. Ta funkcjonalność nie jest niestety natywnie obsługiwana, ale jak widać, można ją osiągnąć stosunkowo prosto. Tylko uważaj, że mimo tego skryptu obsługującego głęboki podział nazw (np. scroll.parent.child) wiązałby on wiele detektorów zdarzeń (w tym przypadku 3), a zatem jest niewskazany.

Można to zrobić bardziej wydajnie, ale to się robi.