Jakie są zdarzenia JavaScript
Jeździsz samochodem i nadchodzi sygnał, jest czerwony, przestań. Kiedy sygnał staje się zielony, zaczniesz jeździć ponownie. Twoje działania były oparte na pewnym sygnale dostarczonym. To samo dotyczy wydarzeń. Podczas programowania chcesz wykonać niektóre akcje, klikając przycisk lub naciskając klawisz. Kliknięcie przycisku lub naciśnięcie klawisza generuje zdarzenie. Na podstawie tego wydarzenia wykonywane są niektóre akcje. Na przykład jest artykuł i przycisk, który brzmi „Pokaż więcej". Po kliknięciu tego przycisku cały artykuł staje się widoczny
W tym poście omówimy wszystko o wydarzeniach z przykładami.
Co to jest wydarzenie
Mówiąc prosto, zdarzenie to akcja wykonana przez użytkownika lub zainicjowaną przez przeglądarkę. JavaScript reaguje/reaguje na to działanie; Ta reakcja/reagowanie na wydarzenie nazywa się obsługą wydarzeń. Obsługa wydarzeń to tylko kawałek kodu napisany przez programistę. Ten kawałek kodu działa po uruchomieniu zdarzenia. Handlerzy zdarzeń są również nazywani słuchaczami wydarzeń. Zdarzenia są wystrzelone w oknie przeglądarki i są powiązane lub przymocowane do jednego lub zestawu elementów. Wydarzenia są z wielu różnych rodzajów. Niektórzy z nich są:
- Użytkownik naciska klawisz na klawiaturze
- Użytkownik unosi się nad elementem
- Użytkownik klika element za pomocą myszy
- Użytkownik zamyka przeglądarkę
- Użytkownik zmienia rozmiar przeglądarki
- Strona internetowa ładuje się lub zakończyła ładowanie
- Kiedy wystąpi błąd
- Użytkownik przesyła formularz
Wydarzenia JavaScript
JavaScript zapewnia nam kilka wydarzeń. Wymienianie wszystkich i wyjaśnienie wszystkich w ramach jednego artykułu jest niemożliwe. Tutaj wymienię tylko najczęstsze:
Zdarzenia wejściowe
- Bluer
- zmiana
- centrum
- KeyUp/KeyDown
- Keypress
Wydarzenia myszy
- Myszy
- Museout
- Mousedown/myszy
Kliknij zdarzenia
- Kliknij
- DBLCLICK
Załaduj zdarzenia
- obciążenie
- rozładować
- błąd
- Zmień rozmiar
Teraz, gdy omówiliśmy teorię, przejdźmy do praktyczności i omówmy niektóre rzeczywiste przykłady zdarzeń JavaScript. Załóżmy, że mam przycisk, a po kliknięciu tego przycisku chcę, aby powiadomienie było wyświetlane użytkownikowi. Kliknięcie przycisku wywołuje zdarzenie, a następnie blok kodu obsługuje zdarzenie i zareaguje, pokazując alert.
To jest prosty przycisk w pliku HTML. Teraz otrzymamy przycisk za pomocą nazwy klasy, a następnie obsługujemy zdarzenie i-e kliknięcia.
const btn = dokument.querySelelector (".Kliknij");Btn.addEventListener („kliknij”, funkcja ()
alert („kliknąłeś przycisk”);
);
Umieść ten kod w znaczniku skryptu lub zrób kolejny plik z rozszerzeniem JS i umieść go tam.
Teraz, gdy klikniemy przycisk, zostanie wyświetlone ostrzeżenie:
Istnieją również inne sposoby wdrożenia tego, na przykład:
const btn = dokument.querySelelector (".Kliknij");Btn.onClick = function ()
alert („kliknąłeś przycisk”);
;
Lub:
const btn = dokument.querySelelector (".Kliknij");funkcja ClickedMe ()
alert („kliknąłeś przycisk”);
;
Btn.onClick = ClickedMe;
Plik HTML i-e przycisk pozostaje taki sam.
Notatka: Możesz umieścić kod JavaScript w znaczniku skryptu, a następnie uruchomić plik HTML w przeglądarce za pomocą serwera na żywo lub utworzyć inny plik z rozszerzeniem JS i odwołać się do nagłówka pliku HTML.
Teraz spójrzmy na inny przykład: załóżmy, że mamy formularz rejestracyjny. W formie mamy dwa pola wejściowe i chcemy umieścić walidację. Jeśli użytkownik przesła formularz, chcemy sprawdzić, czy użytkownik wypełnił zarówno dane wejściowe, czy pozostawił go pusty. Jeśli oba lub jeden z nich jest pusty, pokazujemy ostrzeżenie, że pole jest puste. W przeciwnym razie pokazujemy alert, który mówi, że użytkownik zarejestrował się:
Kiedy opuściliśmy pole hasła puste i kliknęliśmy rejestra. Ale na podstawie naszego przewodnika pole wejściowe „Hasło”Było puste, stąd wiadomość”Proszę wypełnić wymagane pola" jest pokazane.
Kiedy wypełniliśmy oba pola i kliknęliśmy przycisk rejestraZarejestrowany" został pokazany.
Wniosek
Wydarzenia i obsługa wydarzeń są naprawdę ważnymi pojęciami JavaScript. Gdy użytkownik wchodzi w interakcję ze stroną internetową, zdarzenie jest uruchamiane. JavaScript zapewnia obsługę zdarzeń, aby odpowiedzieć na te zdarzenia i uczynić strony internetowe bardziej interaktywne. W tych wydarzeniach możemy umieścić własny kod i logikę i zrobić coś pięknego.
W tym poście krótko omówiliśmy wydarzenia JavaScript i jak możemy sobie z nimi poradzić; Następnie przeszliśmy na rodzaje zdarzeń i obsługi wydarzeń oraz ich rzeczywistych zastosowań.