Poznajemy klasę Event w JavaScript i jej metody. Kontynuacja lekcji poprzednich. Do dzieła.
Klasa Event posiada konstruktor. Można jej używać jako alternatywę już poznanego CustomEvent:
const evt = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evt);Nie twierdzę, że należy tak robić, ale można i na taki kod też się gdzieś natkniemy.
Kolejne metody klasy event to:
- stopPropagation
- stopImmediatePropagation
- preventDefault
- composedPath
Stop Propagation: stopuje propagację w górę (bąbelkowanie). Już to sobie omawialiśmy.
event.stopPropagation()Stop Immediate Propagation: stopuje propagację wszerz (czyli kilka listenerów na taki sam/podobny event). Warto dodać, że kolejność propagacji wszerz zależy od kolejności dodawanie event listenerów (od góry do dołu).
event.stopImmediatePropagation()Prevent Default: zatrzymuje domyślne działanie eventu, jeżeli event nie jest pasywny (mówiąc językiem opcji event listenera) lub jest cancellable (mówiąc językiem opcji klasy Event/CustomEvent).
Warto dodać, że pasywne/niecancellowalne eventy również można zatrzymać słowem kluczowym return.
Composed Path: poznaliśmy już takie coś jak composed. Oznacza to, czy event będzie propagował z shadow DOMu powyżej shadow DOM. Composed path to coś nieco innego, jest to ścieżka wszystkich elementów, na których listenery będą odpalone:
document.querySelector("html").addEventListener("click", (e) => {
console.log(e.composed);
console.log(e.composedPath());
});Composed – czy event, jeśli emitowany w shadow DOMie, będzie bąbelkował powyżej shadow DOM, do normalnego DOMu. Composed Path – ścieżka, po której będzie bąbelkował event.
Tak, jeżeli jeszcze pamiętamy, event idzie z widow w dół, odwiedzając wszystkich pośredników (przodków między window a target) w tzw. capture phase. Gdy event uderzy target mamy target phase.
Od tego target phase zaczyna się bąbelkowanie w górę po wszystkich pośrednikach między targetem a window. Czyli composed path to będzie target, rodzic targetu, jego rodzic, aż do window.
Composed Path oznacza, że na tej ścieżce można też ustawić listenery i będą się one odpalać podczas fazy bąbelkowania w kolejności podanej przez composed path (nie licząc tych, które odpalono w capture phase).
Jeżeli nie rozumiemy, to pobawmy się tym, pododawajmy composedPath do bąbelkujących eventów z poprzednich przykładów, aż wszystko stanie się jasne.
