JavaScript Event Handlers
W JavaScript zdarzenie to akcja, która występuje na stronie internetowej na przeglądarce. To działanie może być pisane w polu, kliknięcie przycisku lub ładowanie strony. Działania mogą być inicjowane przez przeglądarkę lub użytkownik; Gdy na stronie internetowej występuje jakiekolwiek działanie, przeglądarka powiadamia system, że zdarzenie miało miejsce. Deweloperzy mogą następnie odpowiedzieć na te wydarzenia, pisząc funkcje znane jako obsługi wydarzeń.Obserwatrzy zdarzeń to funkcje, które słuchają określonego rodzaju zdarzenia, a kiedy nastąpi to zdarzenie, wykonują blok kodu.
Co to jest obsługa wydarzeń
Zdarzenie jest wyzwalane za każdym razem, gdy użytkownik wchodzi w interakcję ze stroną internetową. To zdarzenie może być wszystkim, od użytkownika kliknięcia gdzieś na stronie po załadowanie strony internetowej.
Ilekroć zdarzenie występuje na stronie internetowej, przeglądarka powiadamia system; Konkretne funkcje obsługi zdarzeń słuchają ich odpowiednich zdarzeń, a gdy zdarzenia są uruchamiane, wykonują blok kodu zapisanego w nich. Kod zapisany wewnątrz funkcji zawiera wszystkie działania, które należy wykonać w odpowiedzi na zwolnione zdarzenie.
W tym poście będziemy przeprowadzić szczegółową dyskusję na temat różnych rodzajów zdarzeń w JavaScript i jak obsługiwać te wydarzenia.
Notatka: Użyję konsoli, aby zademonstrować przykłady obecne w tym poście.
Jakie są różne rodzaje zdarzeń?
Niektóre z najczęstszych zdarzeń, które występują w JavaScript, to:
Wydarzenia myszy:
- na kliknięcie
- Mousedown
- myszy
- Mousemove
Wydarzenia klawiatury:
- Keydown
- Keyup
Tworzyć wydarzenia:
- onfocus
- Onblur
Zdarzenia okienne:
- Onload
- Oneerror
Lista wszystkich wydarzeń, które występują w JavaScript, jest ogromna; Omówimy tylko najczęstsze i szeroko stosowane zdarzenia.
Jak używać zdarzenia kliknięcia w JavaScript
na kliknięcie() Handler zdarzeń służy do słuchania zdarzeń kliknięcia na stronie internetowej. Ilekroć użytkownik kliknie element HTML na stronie, jego odpowiedni na kliknięcie() Trigger jest uruchamiany.
Spójrzmy teraz na przykład, aby uzyskać jasne zrozumienie modułu obsługi zdarzeń kliknięcia:
Mamy stronę internetową z dwoma przyciskami i.mi. Przycisk 1 i przycisk 2:
Jeśli klikniemy którykolwiek z tych przycisków, ich odpowiedni na kliknięcie() Uruchamiany jest obsługa zdarzeń, która drukuje wiadomość na konsolę.
Jak używać zdarzenia fokusowego w JavaScript
onfocus () Wydarzenie uruchamia się, gdy element dostanie lub traci koncentrację:
Na przykład w kodzie podanym poniżej, „Focusevent ()” Metoda jest wywoływana na onfocus () wydarzenie w wejście etykietka:
Html
Wpisz coś tutaj
JavaScript
funkcjaFocusevent ()dokument.getElementById („Input1”).styl.tło = "zielony";
Jak używać zdarzenia KeyDown w JavaScript
Onkeydown () zdarzenie jest wyzwalane, gdy użytkownik naciśnięty jest klawisz:
Na przykład w następującym kodzie „KeyDownEvent ()” funkcja jest wywoływana na „Onkeydown” zdarzenie, a komunikat alarmowy jest pokazany w definicji funkcji:
Html
Wpisz coś tutaj
JavaScript
funkcja keyDownEvent ()dokument.getElementById („Input1”);
alert („naciśnięty klawisz”);
Jak używać zdarzenia ładowania w JavaScript
onload () Wydarzenie jest wyzwalane zaraz po pomyślnym załadowaniu strony internetowej.
Na przykład w podanym poniżej fragmencie kodu, prosty komunikat alarmowy jest wyświetlany na onload () wydarzenie w ciało etykietka:
Wydarzenia JavaScript
Wniosek
Wydarzenia są bardzo ważne w tworzeniu każdej strony internetowej interaktywnej i responsywnej. Wydarzenie może zostać zainicjowane przez przeglądarkę lub użytkownik. Gdy użytkownik wchodzi w interakcje z elementami HTML strony internetowej, zdarzenie jest uruchamiane. JavaScript daje nam opcję odpowiedzi na te wyzwalacze za pomocą obsługi zdarzeń. W tym instruktażu nauczyliśmy się, jak korzystać z obsługi zdarzeń, aby odpowiadać na wydarzenia i uczynić strony internetowe bardziej responsywne.