Wiele aplikacji internetowych do wykonywania swoich funkcji opiera się na jakiejś formie zdarzenia. W pewnym momencie człowiek wchodzi w interakcję ze swoim interfejsem, co generuje zdarzenie. Te zdarzenia powodowane przez człowieka zazwyczaj opierają się na urządzeniu peryferyjnym, takim jak mysz lub klawiatura.

Gdy urządzenie tworzy zdarzenie, program może go nasłuchiwać, aby wiedzieć, kiedy wykonać określone zachowanie. W tym samouczku dowiesz się, jak nasłuchiwać zdarzeń za pomocą JavaScript.

Co to jest programowanie sterowane zdarzeniami?

Programowanie sterowane zdarzeniami to nazwa paradygmatu, który polega na wykonaniu zdarzenia w celu wykonania jego funkcji. Możliwe jest stworzenie programu sterowanego zdarzeniami w dowolnym języku programowania wysokiego poziomu. Jednak programowanie sterowane zdarzeniami jest najczęściej spotykane w językach takich jak JavaScript, które integrują się z interfejsem użytkownika.

Co to jest detektor zdarzeń?

Detektor zdarzeń to funkcja, która inicjuje wstępnie zdefiniowany proces w przypadku wystąpienia określonego zdarzenia. Tak więc detektor zdarzeń „nasłuchuje” akcji, a następnie wywołuje funkcję, która wykonuje powiązane zadanie. To wydarzenie może przybrać jedną z wielu form. Typowe przykłady to zdarzenia myszy, zdarzenia klawiatury i zdarzenia okna.

Tworzenie detektora zdarzeń za pomocą JavaScript

Możesz słuchać wydarzeń na dowolnym element w DOM. JavaScript ma dodajOdbiornikZdarzeń() funkcję, którą możesz wywołać na dowolnym elemencie na stronie internetowej. ten dodajOdbiornikZdarzeń() funkcja jest metodą EventCel berło. Wszystkie obiekty obsługujące zdarzenia implementują ten interfejs. Obejmuje to okno, dokument i poszczególne elementy na stronie.

Funkcja addEventListener() ma następującą podstawową strukturę:

element.addEventListener("zdarzenie", functionToExecute);

Gdzie:

• ten element może reprezentować dowolny znacznik HTML (od przycisku do akapitu)
• ten "wydarzenie" jest ciągiem określającym konkretną, rozpoznaną akcję
• ten funkcja do wykonania jest odniesieniem do istniejącej funkcji

Stwórzmy następującą stronę internetową, która ma kilka elementów HTML:

Witamy


 Witam, witam na mojej stronie.


Ucz się więcej





Informacje użytkownika

Nazwa Użytkownika: 

Składać

Powyższy kod HTML tworzy prostą stronę, która prowadzi do pliku JavaScript o nazwie app.js. ten app.js plik będzie zawierał kod do konfiguracji detektorów zdarzeń. Tak więc, jeśli chcesz zainicjować określony proces za każdym razem, gdy użytkownik kliknie pierwszy przycisk na stronie internetowej, jest to plik, w którym go utworzysz.

Plik app.js

document.querySelector('.btn').addEventListener("kliknij", kliknij Demo)
funkcja kliknijDemo(){
 console.log("Cześć")
}

Powyższy kod JavaScript uzyskuje dostęp do pierwszego przycisku na stronie za pomocą zapytanieSelector() funkcjonować. Następnie dodaje detektor zdarzeń do tego elementu za pomocą dodajOdbiornikZdarzeń() metoda. Konkretne zdarzenie, którego nasłuchuje, ma nazwę „klik”. Gdy przycisk uruchomi to zdarzenie, słuchacz wywoła kliknijDemo() funkcjonować.

Związane z: Dowiedz się, jak korzystać z selektorów DOM

ten kliknijDemo() funkcja wypisuje „Cześć” do konsoli przeglądarki. Za każdym razem, gdy klikniesz przycisk, powinieneś zobaczyć to wyjście w swojej konsoli.

Wyjście zdarzenia „klik”

Czym są zdarzenia myszy?

JavaScript ma MyszZdarzenie interfejs reprezentujący zdarzenia, które występują w wyniku interakcji użytkownika z myszą. Kilka wydarzeń korzysta z MyszZdarzenie berło. Wydarzenia te obejmują:

• Kliknij
• dblklik
• ruch myszą
• najechanie kursorem myszy
• wygaszenie myszy
• w górę myszy
• w dół myszy

ten Kliknij zdarzenie występuje, gdy użytkownik naciśnie i zwolni przycisk myszy, gdy jego wskaźnik znajduje się nad elementem. Dokładnie to miało miejsce w poprzednim przykładzie. Jak widać z powyższej listy, zdarzenia myszy mogą przybierać różne formy.

Innym powszechnym zdarzeniem myszy jest dblklik, co oznacza dwukrotne kliknięcie. Uruchamia się, gdy użytkownik kliknie dwukrotnie przycisk myszy w krótkich odstępach czasu. Niezwykła rzecz w dodajOdbiornikZdarzeń() Funkcja polega na tym, że możesz jej użyć do przypisania wielu detektorów zdarzeń do jednego elementu.

Dodawanie zdarzenia dblclick do pierwszego przycisku

document.querySelector('.btn').addEventListener("dblclick", dblclickDemo)
funkcja dblclickDemo(){
 alert("To jest demonstracja tworzenia zdarzenia podwójnego kliknięcia")
}

Dodanie powyższego kodu do pliku app.js skutecznie utworzy drugi detektor zdarzeń dla pierwszego przycisku na stronie internetowej. Tak więc dwukrotne kliknięcie pierwszego przycisku spowoduje utworzenie następującego alertu w przeglądarce:

Na powyższym obrazku zobaczysz wygenerowany alert, a także zobaczysz, że w konsoli znajdują się jeszcze dwa wyjścia „Cześć”. Dzieje się tak, ponieważ zdarzenie podwójnego kliknięcia jest kombinacją dwóch zdarzeń kliknięcia i istnieją detektory zdarzeń dla obu tych Kliknij i dblklik wydarzenia.

Nazwy innych zdarzeń myszy na liście opisują ich zachowanie. ten ruch myszą zdarzenie występuje za każdym razem, gdy użytkownik porusza myszą, gdy kursor znajduje się nad elementem. ten w górę myszy zdarzenie występuje, gdy użytkownik przytrzyma przycisk nad elementem, a następnie go zwolni.

Czym są zdarzenia klawiatury?

JavaScript ma Zdarzenie Klawiatury berło. Nasłuchuje interakcji między użytkownikiem a jego klawiaturą. W przeszłości, Zdarzenie Klawiatury miał trzy typy zdarzeń. Jednak od tego czasu JavaScript jest przestarzały naciśnięcie klawisza wydarzenie.

Więc kluczowanie oraz klawisz zdarzenia to jedyne dwa zalecane zdarzenia klawiszowe, które są wszystkim, czego potrzebujesz. ten klawisz zdarzenie występuje, gdy użytkownik naciśnie klawisz, a kluczowanie zdarzenie występuje, gdy użytkownik je zwolni.

Wracając do powyższego przykładu HTML, najlepszym miejscem na dodanie detektora zdarzeń klawiatury jest Wejście element.

Dodawanie detektora zdarzeń klawiatury do pliku app.js

let pozdrowienia = document.querySelector('p');
document.querySelector('input').addEventListener("keyup", captureInput)
funkcja przechwytywaniaInput (e){
 pozdrowienia.innerText = (`Witaj ${e.target.value}, witam na mojej stronie.`)
}

Powyższy kod wykorzystuje zapytanieSelector() funkcja dostępu do akapitu i Wejście elementy na stronie. Następnie nazywa dodajOdbiornikZdarzeń() metoda na Wejście element, który nasłuchuje kluczowanie wydarzenie. Kiedykolwiek kluczowanie zdarzenie, wejście przechwytywania() funkcja pobiera wartość klucza i dodaje ją do akapitu na stronie. ten mi parametr reprezentuje zdarzenie, które JavaScript przypisuje automatycznie. Ten obiekt zdarzenia ma właściwość target, która jest odwołaniem do elementu, z którym użytkownik wchodził w interakcję.

W tym przykładzie etykieta dołączona do Wejście pole żąda nazwy użytkownika. Jeśli wpiszesz swoje imię i nazwisko w polu wejściowym, strona internetowa będzie wyglądać mniej więcej tak:

Akapit zawiera teraz wartość wejściową, którą w powyższym przykładzie jest „Jane Doe”.

addEventListener przechwytuje wszystkie rodzaje interakcji użytkownika

Ten artykuł wprowadził Cię do dodajOdbiornikZdarzeń() metody, a także kilka zdarzeń myszy i klawiatury, których można z nią używać. W tym momencie wiesz, jak nasłuchiwać konkretnego zdarzenia i jak stworzyć funkcję, która na nie reaguje.

ten addEventListener zapewnia jednak dodatkowe możliwości dzięki trzeciemu parametrowi. Możesz go użyć do kontrolowania propagacji zdarzeń: kolejności, w jakiej zdarzenia przechodzą od elementów do ich rodziców lub dzieci.

Zrozumienie propagacji zdarzeń w JavaScript

Zdarzenia to potężna funkcja JavaScript. Zrozumienie, w jaki sposób przeglądarka internetowa podnosi je w stosunku do elementów, jest kluczem do opanowania ich użycia.

Czytaj dalej

O autorze