Dziś przed Wami eksperymentalnie krótki wpis typowo techniczny o pewnej ciekawostce z JavaScriptu, a jest nią argument o nazwieuseCapture w metodzie addEventListener. Ruszamy!
Aktualnie jestem na Vanilla JS Academy Chrisa Ferdinandi, autora Go Make Things. Kurs jest pełen bardzo fajnych treści o Vanilla JS. Żeby niektóre sprawy mi nie umknęły, postanowiłam je zachowywać tu w formie krótkich wpisów. Będę wyjaśniać zagadnienie i dorzucać swój kod, który pozwala mi je zrozumieć.
Mam nadzieję, że taka opcja przypadnie Ci do gustu. Jeśli spodoba Ci się poniższa treść, koniecznie daj mi znać: najlepiej w wiadomości na Instagramie albo przez maila na joanna@wakeupandcode.pl (komentarze na blogu powoli wygaszam).
A teraz przechodzimy do dzisiejszego zagadnienia!
useCapture w metodzie addEventListener
Gdy chcemy zareagować na jakiś event na stronie, musimy na niego nasłuchiwać korzystając z metody addEventListener (więcej poczytasz o niej tutaj). Metoda ta przyjmuje trzy argumenty. Pierwszym z nich jest nazwa wydarzenia, na które nasłuchujemy (na przykład kliknięcie). Drugi to funkcja, która ma zostać wykonana, gdy to wydarzenie zajdzie. Trzeci argument to useCapture.
Właściwie zupełnie pomijałam trzeci argument, nigdy nie zwrócił mojej uwagi. Do czego on służy? useCapture pozwala przechwytywać wydarzenia podane w pierwszym argumencie. Przechwycone wydarzenie jest najpierw podawane do listenera, a potem dopiero do innych obiektów nasłuchujących. To może brzmieć dość zawile, ale w praktyce w większości przypadków useCapture będzie ustawiony na false. Dlatego też właśnie nigdy nie zwracałam na niego uwagi – gdy nie podamy do addEventListener trzeciego argumentu, uznawany jest on za wartość false.
useCapture ustawiamy na true, gdy chcemy nasłuchiwać na wydarzenie, które nie propaguje w górę drzewa DOM (nie zachodzi bubbling). Przykładem takiego eventu jest blur, czyli akcja opuszczenia pola (np. w formularzu). Gdy nasłuchujemy na event dla konkretnego pola, działamy bez zmian, czyli trzeci argument może być ustawiony na false.
Załóżmy, że w pliku HTML mamy taki fragment:
<label for="name">Imię</label> <input type="text" name="name" id="name">
Wtedy kod JS będzie wyglądał tak:
const input = document.querySelector("#name");
input.addEventListener('blur', function() {
console.log('działa');
});
Po opuszczeniu pola z imieniem, w konsoli wyloguje się “działa”.
Problem pojawia się, gdy chcemy nasłuchiwać na wszystkie eventy typu blur na stronie. Mamy więc taki kod HTML:
<div>
<label for="name">Imię</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="surname">Nazwisko</label>
<input type="text" name="surname" id="surname">
</div>
Gdy listener dołączamy do window (bo chcemy nasłuchiwać na wszystkie eventy blur pojawiające się w oknie), nic nie będzie się działo. Nie zobaczymy nic w konsoli, ponieważ event blur nie jest przechwytywany przez nasz listener. Dlatego nasza metoda powinna mieć ustawione useCapture na true.
window.addEventListener('blur', function() {
console.log('działa');
}, true);
Powyższy kod będzie logował w konsoli słowo “działa”, gdy opuścimy jakikolwiek element mający ten event na stronie. W naszym przypadku to będą oba inputy.
Skąd wiedzieć, który event powinien mieć podany trzeci argument o wartości true w listenerze? Należy sprawdzić na stronie dokumentacji dla danego eventu (tutaj cała lista), czy propaguje w górę (wartość Bubbles). Jeżeli event nie propaguje, dodajemy useCapture o wartości true, gdy chcemy go przechwytywać.
Zachęcam Cię do samodzielnego sprawdzenia powyższych informacji i pobawienia się chwilę kodem 🙂
Wpis powstał na podstawie poniższych artykułów:
WTF is use capture in vanilla JS event listeners?
When do you need to use useCapture with addEventListener?
Myślisz o pracy jako front-end developer? To się świetnie składa! Już 28 maja poprowadzę darmowy webinar, który organizuję razem z Girls in Tech Poland. Opowiem o tym, czego trzeba się nauczyć, aby myśleć o pracy jako front-end developer, przybliżę też to, czym w ogóle front-end developer się zajmuje. No i dorzucę parę słów o uczeniu się w ogóle i pierwszej pracy. Szczegóły i link do zapisów znajdziesz tutaj.
A jak chcesz posłuchać, jakie zjawiska spotykają nas podczas kodowania (i jak sobie z nimi radzić), koniecznie zarejestruj się na meetup online How You Doin’ IT. Już 8 czerwca wystąpię i odpowiem na bardzo ważne pytanie, które zadają sobie osoby uczące się kodu. A pytanie brzmi: “Czy tylko ja tak mam?”.
Ostatnio najwięcej działam na Instagramie, więc zachęcam, abyś mnie tam odwiedziła/odwiedził. Właściwie codziennie nagrywam teraz relacje na tematy okołoprogramistyczne w ramach akcji #30devstories. Mam nadzieję, że wpadniesz!