Wydarzenia w JavaScript | Wyjaśniono przykładami
JavaScript jest znane z tego, że daje stronę zdolności do „myślenia i działania”, co jest możliwe z powodu zdarzeń. Wydarzenia działają jak wyzwalacze, które skłoniły skrypty zaplecza do wykonywania działań. Można je łatwo nazwać "rzeczy" Tak zdarza się na stronie internetowej, te zdarzenia mogą być wszystkim: załadowanie strony internetowej, kliknięcie przycisku HTML lub unoszenie myszy na określonym elemencie HTML.
Istnieją gazilony zdarzeń, które mogą wywołać JavaScript, mamy zdarzenia, aby uruchomić funkcję na kliknięciu myszy lub na myszy, ale zamierzamy obejmować pracę z wydarzeniami i JavaScript.
Prosty przykład wykonywania zdarzenia JavaScript na przycisku pokazano poniżej:
Handlerzy zdarzeń
Wydarzenia są zarządzane przez obsługujących zdarzenia; HTML zapewnia możliwość dodawania różnych rodzajów obsługi zdarzeń do swoich elementów, te obsługi zdarzeń umożliwiają programistę uruchamiania kodu JavaScript poprzez wykonanie funkcji.
Istnieją 3 rodzaje obsługi zdarzeń:
- Dom-on-Event Słuchacz
- Słuchacz w linii
- metoda addEventListener ()
Słuchacz DOM On-Event
Możemy używać słuchaczy zdarzeń w właściwościach DOM, takich jak wyzwolenie zdarzenia po pełnym załadowaniu strony internetowej. Ci słuchacze zdarzeń można również dodać do elementów HTML, ale ograniczenie jest jednym słuchaczem zdarzeń na każdy element HTML.
Na przykład chcemy powiadomić użytkownika o pełnym ładowaniu strony internetowej, możemy to zrobić, uzyskując dostęp do obiektu Window DOM:
Po uruchomieniu pliku HTML zobaczysz następujące dane wyjściowe:
Jak widać, po całkowitym załadowaniu strony internetowej, JavaScript ostrzega użytkownika, którą załadował strona internetowa.
Notatka: Obiekt okna służy do pracy nad wydarzeniami globalnymi.
Słuchacz w linii
Jedną z trywialnych metod podczas pracy z HTML i JavaScript jest użycie słuchaczy zdarzeń Inline, robimy to poprzez dodanie słuchacza zdarzenia jako atrybutu elementu wewnątrz jego znacznika.
Na przykład w powyższym przykładzie dodaliśmy "na kliknięcie()" zdarzenie wewnątrz elementu przycisku, gdy używamy wbudowanego słuchacza zdarzeń.
Jak widzisz, btnclicked () to funkcja, która zostanie wykonana przy kliknięciu przycisku.
Jeśli chcemy wydrukować ciąg do konsoli „Naciśnąłeś przycisk”, możemy to zrobić, pisząc btnclicked () funkcja tak:
Po uruchomieniu pliku HTML otrzymasz następujące dane wyjściowe.
Za pomocą addEventListener ()
Trzeci obsługa zdarzeń jest dodawana za pomocą metody addEventListener (), jest to nowy i najczęściej używany sposób obsługi zdarzeń w JavaScript; Aby to pokazać, utworzymy DIV w HTML, używając następujących wierszy kodu:
Przykład addEventListener ()
Aby dodać do tego słuchacza zdarzeń div użyjesz następującego fragmentu skryptu:
Jeśli przyjrzysz się uważnie fragmentowi scenariusza, zauważysz, że dodajemy 3 różne słuchaczy zdarzeń na tej div, jeden, gdy kursor wchodzi do div, po drugie, gdy kursor opuszcza div i ostatni, gdy kursor kliknie div; Po napisaniu całego tego kodu zapisz go, ponownie załaduj stronę, a otrzymasz następujące dane wyjściowe:
Jak widać w konsoli, nasze obsługi wydarzeń działają i wykonywany jest kod JavaScript.
To jest na wydarzenia w JavaScript
Wniosek
Wydarzenia w JavaScript to występowanie takich przypadków, które skłoniły JavaScript do wykonania pewnej manipulacji elementami HTML lub do wykonania funkcji zaplecza. Wydarzenie w JavaScript służy do zapewnienia stronie internetowej HTML zdolności do myślenia i wykonywania działań, zdarzenia te mogą być wszystkim, co robi użytkownik: kliknięcie przycisku, naciśnięcie określonego klucza lub określonego ruchu myszy. Istnieje również niektóre globalne zdarzenia, do których można uzyskać dostęp za pomocą obiektu okna, takich jak okno.obciążenie(). Dowiedzieliśmy się o różnych rodzajach obsługi zdarzeń wraz z ich przykładami.