Metoda Dom Event Event Method w JavaScript

Możesz dodać słuchacz zdarzeń do elementów HTML DOM za pomocą addEventListener () metoda. Metoda addEventListener () pozwala kontrolować reakcję dla odpowiedniego zdarzenia. JavaScript jest odizolowany od tekstu HTML podczas korzystania z metody addEventListener (), ułatwiając zrozumienie i umożliwiając dodawanie słuchaczy zdarzeń, nawet jeśli nie kontrolujesz znacznika HTML.

W tym spisie omówi Dom Dom Event Listener Metoda w JavaScript. Wyjaśnimy użycie metody słuchacza zdarzeń DOM do dodawania pojedynczych i wielu przewodników do elementów HTML. Ponadto zostaną również wykazane przykłady związane z bulgotaniem zdarzeń i przechwytywaniem zdarzeń. A więc zacznijmy!

Metoda Dom Event Event Method w JavaScript

Jako programista JavaScript możesz użyć metody DOM addEventListener () do dodawania słuchacza zdarzeń w dowolnym obiekcie HTM, takim jak obiekty okienne, elementy HTML, dokument HTML lub XMLHTTPREQUEST Obiekt obiektowy.

Istnieje inny "NA" Właściwość JavaScript, która jest używana w tym samym celu; Jednak nie jest to zbyt przydatne w porównaniu z metodą addEventListener (), ponieważ metoda DOM addEventListener () pozwala na dodanie wielu słuchaczy zdarzeń w obiekcie okiennym lub elemencie HTML.

Składnia metody addEventListener ()

obiekt.addEventListener (zdarzenie, funkcja, usecapture);

Tutaj pierwszy parametr, "wydarzenie" jest dodawany, aby określić zdarzenie, dla którego chcesz dodać obsługę zdarzeń; Drugi parametr, "funkcjonować" wywołuje funkcję, która zostanie wykonana, gdy nastąpi określone zdarzenie. Trzeci parametr jest opcjonalny; gdzie musisz dodać albo„Zdobycie wydarzenia” Lub „Bulgotanie wydarzeń”.

Przykład 1: Korzystanie z metody słuchacza DOM do dodawania obsługi zdarzeń w JavaScript

Ten przykład pokaże procedurę dodania metody słuchacza zdarzenia DOM dla zdarzenia myszy „kliknij” w JavaScript. Po pierwsze, dodamy nagłówek z

tag, akapit z

tag i przycisk za pomocą znacznika:

Metoda Dom Event Event Method w JavaScript

Ten program JavaScript wykorzystał metodę addeventListener ()

Dodaliśmy również identyfikator "przycisk 1" dla naszych "Kliknij" przycisk:

Kliknij

Metoda getElementById zostanie wywołana w celu znalezienia i uzyskania przycisku posiadania "przycisk 1" ID. Potem „AddEventListener ()” Metoda doda "Kliknij" wydarzenie, które wywoła „DisplayDate ()” metoda:

Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:

Po uzyskaniu wyjścia kliknij "Kliknij" przycisk, aby sprawdzić bieżącą godzinę i datę:

Przykład 2: Korzystanie z metody słuchacza DOM do dodawania wielu obsługi zdarzeń w JavaScript

JavaScript oferuje również funkcjonalność dodawania wielu obsługi zdarzeń dla tego samego obiektu. Aby zademonstrować jego procedurę, napisaliśmy następujący program JavaScript z nagłówkiem, akapitem i przyciskiem posiadającym "przycisk 1" ID. Zauważ, że dodamy wiele obsługi zdarzeń dla "przycisk" Element HTML:

Dodaj obsługę zdarzeń w JavaScript

Ten program JavaScript wykorzystał metodę addeventListener ()

Kliknij

W następnym kroku będziemy "A" obiekt, który znajdzie i otrzyma przycisk z "przycisk 1" ID poprzez wywołanie dokumentu.GetElementById () Metoda:

Uderz w "Kliknij" przycisk, a dostajesz dwa alerty w przeglądarce, jeden po drugim:

Przykład 3: Korzystanie z metody słuchacza zdarzeń DOM do dodawania obsługi zdarzeń do obiektu Window w JavaScript

W poniższym przykładzie dodajemy metodę addEventListener () do "okno" obiekt. Metoda dodanej addEventListener () zostanie uruchomiona, gdy użytkownik wykonuje „Mousedown” działanie:

JavaScript addEventListener ()

W tym przykładzie używa metody addEventListener () na obiekcie okna.

Miniemy również "wydarzenie" obiekt metody addEventListener (). "wydarzenie" Obiekt obejmuje wszystkie informacje związane z Mousedown wydarzenie:

Wykonanie powyższego programu JavaScript wyświetli następujące dane wyjściowe:

Teraz naciśnij "lewy" Przycisk myszy nad wybranym elementem, a zobaczysz następujące alert:

Bulgotanie zdarzeń w JavaScript

W JavaScript bulgotanie zdarzeń jest wydarzeniem, które podnosi się od celu lub najgłębszych elementów do rodziców, a następnie podąża za dnem do górnego podejścia i przesuwa przepływ kontroli do swoich przodków. Bulgotanie zdarzeń jest uważane za domyślną metodę przepływu zdarzeń we wszystkich nowoczesnych przeglądarkach.

Przykład: bulgotanie zdarzeń w JavaScript

W poniższym przykładzie dodaliśmy tytuł z tagiem, element div z identyfikatorem „Parenement” i jego zagnieżdżony element przycisku dziecięcego mający identyfikator „ChildElement”:

Dziecko

Po przypisaniu utworzonych elementów HTML za pomocą "dokument.querySelelect () ” Metoda, dodamy słuchacza zdarzeń do obu Div „Parenement” i jego zagnieżdżone „ChildElement” przycisk. Funkcja przeszła w „AddEventListener ()” wyświetli dodany ciąg w "konsola.dziennik()" metoda:

Teraz klikniemy "Dziecko" przycisk, który można zobaczyć na następujących wyjściach:

Klikając "Dziecko" przycisk, przekazanie "funkcjonować()" W metodzie addEventListener () zostanie wykonana. A później "na kliknięcie()" Metoda „Div” Element zostanie wywołany. To wszystko dzieje się z powodu „Bulgotanie wydarzeń”:

W powyższym przykładzie, kiedy kliknęliśmy "Dziecko" przycisk "Kliknij" zdarzenie jest przekazywane z przycisku o identyfikatorze „ChildElement” a kontrola przepływu zdarzeń przesuwa się do "dokument" W następnej kolejności:

Wydarzenie zdarzenia w JavaScript

Proces, w którym zdarzenie jest przechwytywane, gdy jego przepływ sterowania przesuwa się z górnego elementu do celu lub najbardziej zewnętrznego elementu. Chociaż współczesne przeglądarki nie mają możliwości domyślnie włączania zdarzeń, możesz wykonać tę operację za pomocą kodu JavaScript.

Przykład: zdarzenie przechwytywania w JavaScript

Przede wszystkim w naszym programie JavaScript dodamy tytuł i „Div” element mający identyfikator „Parenement” i jego dziecięcy element z „ChildElement” ID:

Dziecko

Następnie wywołamy "dokument.querySelelect () ” Metoda zdobycia elementu rodzica i dziecka:

Następujące "Dziecko" przycisk najpierw wywoła zdarzenie dodane do elementu nadrzędnego. Następnie wykona zdarzenie dołączone do celu zdarzenia:

W powyższym przykładzie, kiedy kliknęliśmy "Dziecko" przycisk "Kliknij" zdarzenie jest przekazywane z elementu nadrzędnego, który jest „dokumentem” do określonego celu zdarzenia „ChildElement” przycisk:

Wniosek

Za pomocą metody DOM addEventListener () możesz dodać słuchacz zdarzeń do obiektu okna i elementów HTML. Bez zastąpienia istniejących obsługi zdarzeń, metoda JavaScript addEventListener () przypisuje obsługę zdarzeń do konkretnego obiektu. Ponadto obiekt pojedynczego okna może mieć również wiele obsługi zdarzeń. W tym spisie omówiono metodę słuchacza zdarzeń DOM w JavaScript. Wyjaśniliśmy również wykorzystanie metody słuchacza zdarzeń DOM do dodawania pojedynczych i wielu obsługi do elementów HTML. Ponadto pokazano również przykłady związane z bulgotaniem zdarzeń i przechwytywaniem zdarzeń.