Jak dodać obsługę zdarzeń do obiektu okiennego w JavaScript

Twoje automatycznie tworzone okno przeglądarki jest znane jako Obiekt okna. Jest uważany za przedmiot przeglądarki, a nie JavaScript. Jeśli czytasz ten artykuł w swojej ulubionej przeglądarce, bieżąca karta reprezentuje obiekt okna. Obiekt okna może używać szerokości, wysokości, alertów i podpowiedzi systemu Windows.

Z pomocą addEventListener () Metoda, programista JavaScript może dodać Handlerzy zdarzeń do określonego obiektu okiennego. Ta metoda 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 masz kontroli nad znacznikiem HTML.

W tym zapisie omówi procedurę dodawania obsługi zdarzeń do obiektu Window w programie JavaScript. Ponadto zostaną również wykazane przykłady związane z wykorzystaniem metody addeventListener (. A więc zacznijmy!

Dodawanie obsługi zdarzeń do obiektu okna w JavaScript

Jako programista JavaScript możesz użyć metody addEventListener () do dodawania słuchacza zdarzeń do dowolnego obiektu HTML. Istnieje inny „NA„Właściwość JavaScript, która jest używana w tym samym celu; Nie jest to jednak zbyt przydatne w porównaniu z metodą addEventListener (), ponieważ metoda 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”Dodaje się, 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. Ostatni parametr jest opcjonalny, który może być przechwytywania lub bulgotania zdarzeń.

Przykład 1: Dodanie obsługi zdarzeń do obiektu okna w JavaScript

Dodamy metodę addEventListener () do „okno”Obiekt w poniższym przykładzie. 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.

Możemy również przekazać „wydarzenie„Obiekt do metody addEventListener (). „„wydarzenie„Obiekt obejmuje wszystkie informacje związane z wydarzeniem Mousedown:

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

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

Teraz kliknij w lewo na ekranie, a zobaczysz następujące alert:

Przykład 2: Dodanie obsługi zdarzeń dla zdarzenia kliknięcia myszy w JavaScript

Ten przykład pokaże procedurę dodawania obsługi zdarzeń myszy „Kliknij„Wydarzenie w JavaScript. W tym przykładzie nie dodajemy zdarzenia bezpośrednio do obiektu okna, ale do jego obiektu dokumentu.

Po pierwsze, dodamy nagłówek z

tag, akapit z

tag i przycisk za pomocą znacznika:

Dodaj obsługę zdarzeń w JavaScript

Ten program JavaScript wykorzystał metodę addeventListener ()

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

> Kliknij mnie

Metoda getElementById zostanie wywołana w celu znalezienia i uzyskania przycisku o „przycisk 1" ID. Potem „„addEventListener ()„Metoda doda„Kliknij„Wydarzenie, które wywoła„displayDate ()" metoda:

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

Wniosek

Za pomocą metody addEventListener () możesz dodać obsługę zdarzeń do obiektu okna i elementów HTML. Bez zastąpienia istniejących obsługi zdarzeń, metoda JavaScript addEventListener () przypisuje obsługę zdarzeń do określonego obiektu, a obiekt pojedynczego okna może mieć również wiele obsługi zdarzeń. W tym zapisie omówiono procedurę dodawania obsługi zdarzeń do obiektu Window w programie JavaScript oraz przykłady związane z wykorzystaniem metody addEventListener ().