Wydarzenie jest ważną częścią Strona internetowa reaguje zgodnie z wydarzeniem, które miało miejsce. Niektóre zdarzenia są generowane przez użytkowników, a inne przez interfejsy API. W tym artykule zobaczymy, jak zachodzą zdarzenia i jak metoda addEventListener w JavaScript jest używana w następującej kolejności:
- Co to jest odbiornik wydarzeń?
- AddEventListener () w JavaScript
- Wartości parametrów
- AddEventListener w JavaScript: przykład
Co to jest odbiornik wydarzeń?
Detektor zdarzeń to procedura w JavaScript, która czeka na wystąpienie zdarzenia. Prosty przykład pliku zdarzenie to użytkownik klikający myszą lub naciskający klawisz na klawiaturze.
Plik addEventListener () jest wbudowany Funkcja JavaScript który pobiera zdarzenie do nasłuchiwania i drugi argument wywoływany za każdym razem, gdy opisane zdarzenie zostanie uruchomione. Do pojedynczego elementu można dodać dowolną liczbę programów obsługi zdarzeń bez nadpisywania istniejących programów obsługi zdarzeń.
addEventListener () w JavaScript
Niektóre funkcje metody detektora zdarzeń obejmują:
- Plik addEventListener () metoda dołącza plik moduł obsługi zdarzeń do określonego elementu.
- Ta metoda dołącza procedurę obsługi zdarzeń do elementu bez nadpisywanie istniejące programy obsługi zdarzeń.
- Możesz dodać wiele programów obsługi zdarzeń do jednego elementu.
- Możesz dodać wiele programów obsługi zdarzeń taki sam typ do jednego element czyli dwa zdarzenia „kliknięcia”.
- Odbiorniki zdarzeń można dodać do dowolnego OSĄD obiekt nie tylko elementów HTML. czyli obiekt okna.
- Umożliwia to metoda addEventListener () łatwiej aby kontrolować, jak zdarzenie reaguje do bulgotania.
Podczas korzystania z metody addEventListener () kod JavaScript jest oddzielony od dla lepszej czytelności i umożliwia dodawanie detektorów zdarzeń, nawet jeśli nie kontrolujesz znaczników HTML.
Możesz również łatwo usunąć nasłuchiwanie zdarzeń przy użyciu rozszerzenia removeEventListener (), metoda .
Składnia:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantUntrusted])
jak ustawić ścieżkę do java
Wartości parametrów
| Parametr | Opis |
zdarzenie | Wymagany. Ciąg, który określa nazwę zdarzenia. Uwaga: nie używaj przedrostka „on”. Na przykład użyj „kliknij” zamiast „onclick”. Listę wszystkich zdarzeń HTML DOM znajdziesz w naszym pełnym dokumencie HTML DOM Event Object Reference. |
funkcjonować | Wymagany. Określa funkcję do uruchomienia, gdy wystąpi zdarzenie. W przypadku wystąpienia zdarzenia obiekt zdarzenia jest przekazywany do funkcji jako pierwszy parametr. Rodzaj wydarzenia obiekt zależy od określonego zdarzenia. Na przykład zdarzenie „click” należy do obiektu MouseEvent. |
useCapture | Opcjonalny. Wartość logiczna, która określa, czy zdarzenie powinno zostać wykonane w fazie przechwytywania, czy w fazie propagacji. Możliwe wartości: true - procedura obsługi zdarzeń jest wykonywana w fazie przechwytywania - wartość domyślna. Procedura obsługi zdarzeń jest wykonywana w fazie propagacji |
Teraz, gdy wiesz już, jak działa detektor zdarzeń, przyjrzyjmy się przykładowi metody addEventListener () w JavaScript.
addEventListener () w JavaScript: przykład
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt W tym przykładzie zastosowano metodę addEventListener () w celu wykonania funkcji, gdy użytkownik kliknie przycisk. & lt / p & gt & ltbutton id = 'myBtn' & gtItry it & lt / gtb & gtB & ltsE. ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
W ten sposób dochodzimy do końca tego addEventListener w JavaScript. Mam nadzieję, że rozumiesz, jak słuchacz wydarzenia metoda działa w JavaScript.
mysql_fetch_array php
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „addEventListener in JavaScript”, a my skontaktujemy się z Tobą.