Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Obsługa zdarzeń jest ważnym pojęciem w JavaScript. Zdarzenia sprawiają, że strony HTML są dynamiczne i interaktywne, umożliwiając tworzenie atrakcyjnych interfejsów użytkownika. Możesz napisać kod uruchamiający JavaScript, gdy wystąpi zdarzenie w DOM.

Zdarzenie może mieć miejsce, gdy użytkownik kliknie element HTML, wczyta się strona lub gdy zmieni się wartość pola wejściowego. Możesz napisać kod, który zmienia strukturę HTML po wystąpieniu zdarzenia. Poznaj trzy różne sposoby dodawania detektorów zdarzeń do kodu.

1. Metoda addEventListener

Metoda addEventListener jest jedną z popularnych metody nasłuchiwania zdarzeń. Ma trzy parametry:

  • Obiekt reprezentujący zdarzenie.
  • Funkcja do obsługi.
  • Opcjonalna wartość logiczna useCapture, która opisuje, w jaki sposób zdarzenie rozprzestrzenia się w DOM.

Zdarzenie może być dowolnym określonym zdarzeniem DOM w elemencie docelowym. Funkcja jest skonfigurowana tak, aby reagować na to zdarzenie, gdy wystąpi.

instagram viewer

Funkcja może być anonimowa lub nazwana. Popularne cele obejmują element, jego elementy podrzędne, dokument i okno obsługujące zdarzenie.

Metoda addEventListener() jest zalecaną metodą administrowania detektorami zdarzeń w JavaScript. Działa na każdym celu zdarzenia, nie tylko na elementach HTML, i obsługuje wiele procedur obsługi zdarzeń.

Możesz chcieć wykonać jakiś kod w DOM. Możesz drukować tekst, wykonywać obliczenia lub wyświetlać obraz, gdy użytkownik kliknie przycisk.

Zilustrujmy to następującym kodem:

HTML>
<HTML>
<ciało>
<h1>Metoda addEventListener z funkcjamih1>
<przyciskID="mójBtn">Kliknij tutajprzycisk>
<PID="próbny">P>
ciało>
HTML>

Następnie dodaj detektor zdarzeń za pomocą przycisku .

konst element = dokument.getElementById("mójBtn");
element.addEventListener("Kliknij", mojaFunkcja1);
funkcjonowaćmojaFunkcja1() {
dokument.getElementById("próbny").innerHTML += „Fukcja wykonana! "
}

Po kliknięciu przycisku na ekranie zostanie wydrukowany tekst „Funkcja wykonana”, jak pokazano poniżej.

2. Delegowanie zdarzeń do addEventListener

Delegowanie zdarzenia w JavaScript to wzorzec używany do obsługi wielu zdarzeń. Zamiast dodawać detektor zdarzeń do każdego elementu, dodajesz detektor zdarzeń tylko do elementu nadrzędnego. Dostęp do elementu, który wywołał zdarzenie, można uzyskać za pośrednictwem pliku .cel właściwość obiektu zdarzenia.

Dzięki temu wszystkie elementy, na które kierujesz, mają wspólne zachowanie. Bez tego musiałbyś ręcznie dodać detektor zdarzeń do każdego z nich.

Oto przykład delegowania zdarzeń:

HTML>
<HTML>
<ciało>
<h1> Delegacja zdarzeń na przyciskachh1>
<dz>
<przycisk>Przycisk 1przycisk>
<przycisk>Przycisk 2przycisk>
<przycisk>Przycisk 3przycisk>
dz>
ciało>
HTML>

Następnie dodaj detektory zdarzeń do wszystkich przycisków za pomocą zaledwie kilku linijek kodu.

konst div = dokument.querySelector(„dział”)
div.addEventListener("Kliknij", (zdarzenie) => {
Jeśli (zdarzenie.cel.tagNazwa 'PRZYCISK') {
konsola.dziennik(„Kliknięto przycisk”)
 }
});

Delegowanie zdarzeń jest wzorcem opartym na bąbelkowaniu zdarzeń. Bąbelkowanie zdarzeń ma miejsce, gdy element odbiera zdarzenie i przesyła je do swoich elementów nadrzędnych i przodków w DOM. To jest propagacja zdarzeń koncepcja, która dzieje się domyślnie w JavaScript.

3. Korzystanie z atrybutu onclick

Możesz użyć atrybutu onclick, aby uruchomić JavaScript, gdy użytkownik kliknie element. Podobnie jak w przypadku metody addEventListener, metody onclick można używać do drukowania tekstu, wykonywania obliczeń i zmiany właściwości elementów na DOM.

Możesz dodać detektor zdarzeń onclick jako wbudowany moduł obsługi zdarzeń do elementu HTML. Zdarzenie występuje, gdy użytkownik kliknie element. Dynamicznie zmieniaj kolor następującego akapitu za pomocą metody onclick:

HTML>
<HTML>
<ciało>
<h1> Wykonaj zdarzenia onClickh1>
<PID="próbny"na kliknięcie="mojaFunkcja()">
 Kliknij mnie, aby zmienić kolor tekstu.
P>
ciało>
HTML>

W pliku JavaScript dodaj następujący kod:

funkcjonowaćmojaFunkcja() {
dokument.getElementById("próbny").styl.kolor = "czerwony";
}

Dane wyjściowe będą wyglądać tak, jak pokazano:

Dlaczego warto dowiedzieć się więcej o detektorach zdarzeń?

Jako programista JavaScript będziesz często używać detektorów zdarzeń w projektach. Możesz tworzyć liczne funkcje za pomocą detektorów zdarzeń, w tym bąbelkowanie i przechwytywanie zdarzeń. Zrozumienie tych pojęć ułatwi tworzenie dynamicznych interfejsów w aplikacjach.