Metoda addEventListener() obiektu DOM HTML
- Poprzednia strona accessKey
- Następna strona appendChild()
- Wróć do poprzedniego poziomu Obiekt Elements DOM HTML
Definicja i użycie
addEventListener()
Metoda dodaje program obsługi zdarzeń do elementu.
Przykład
Przykład 1
Dodaj zdarzenie click do elementu <button>:
element.addEventListener("click", myFunction); function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }
Przykład 2
Código más compacto:
element.addEventListener("click", function() { document.getElementById("demo").innerHTML = "Hello World"; });
Więcej przykładów znajdziesz w dolnej części strony.
Gramatyka
element.addEventListener(type, function, useCapture)
Parametry
Parametry | Opis |
---|---|
type |
Wymagane. Nazwa zdarzenia. Nie używaj prefiksu "on". Użyj "click" zamiast "onclick". |
function | Wymagane. Funkcja uruchamiana w momencie zdarzenia. |
useCapture |
Opcjonalne (domyślne = false).
|
Zwracana wartość
Brak.
Techniczne szczegóły
Ta metoda doda określoną funkcję słuchacza zdarzenia do zbioru słuchaczy bieżącego węzła, aby obsługiwać określony typ type zdarzenia. useCapture Jest ustawiony na true, to słuchacz jest zarejestrowany jako słuchacz zdarzenia przechwytywania. Jeśli useCapture Jest ustawiony na false, to jest zarejestrowany jako zwykły słuchacz zdarzenia. Jeśli
addEventListener() może być wywoływane wiele razy, rejestrując wiele gestów zdarzeń tego samego typu na tym samym węźle. Ale należy zauważyć, że DOM nie może określić kolejności wywoływania wielu gestów zdarzeń.
Jeśli funkcja słuchacza zdarzenia jest zarejestrowana dwukrotnie na tym samym węźle za pomocą tego samego type i useCapture Parametr zarejestrowany dwa razy, drugie zarejestrowanie zostanie zignorowane. Jeśli podczas przetwarzania zdarzenia na węźle zostanie zarejestrowany nowy słuchacz zdarzenia na tym samym węźle, nowy słuchacz zdarzenia nie zostanie wywołany dla tego zdarzenia.
Kiedy Node.cloneNode() Metoda lub Document.importNode() Kiedy metoda klonuje węzeł Document, nie klonuje zdarzeń słuchaczy zarejestrowanych dla oryginalnego węzła.
Ta metoda również Document i Window Definiowane na obiekcie i działają podobnie.
Więcej przykładów
Przykład 3
Możesz dodać wiele zdarzeń do tego samego elementu:
element.addEventListener("click", myFunction1); element.addEventListener("click", myFunction2);
Przykład 4
Możesz dodać różne zdarzenia do tego samego elementu:
element.addEventListener("mouseover", myFunction); element.addEventListener("click", someOtherFunction); element.addEventListener("mouseout", someOtherFunction);
Przykład 5
Aby przekazać wartości parametrów, użyj "funkcji anonimowych":
element.addEventListener("click", function() { myFunction(p1, p2); });
Przykład 6
Zmień kolor tła elementu <button>:
element.addEventListener("click", function() { this.style.backgroundColor = "red"; });
Przykład 7
Różnica między bąbelkowaniem a przechwytywaniem:
element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);
Przykład 8
Usuwanie programistów zdarzeń:
element.addEventListener("mousemove", myFunction); element.removeEventListener("mousemove", myFunction);
Obsługa przeglądarek
element.addEventListener()
To funkcja DOM Level 2 (2001).
Wszystkie przeglądarki obsługują to w pełni:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Wsparcie | 9-11 | Wsparcie | Wsparcie | Wsparcie | Wsparcie |
Strony związane
Metody elementu:
Metody dokumentu:
Kurs:
- Poprzednia strona accessKey
- Następna strona appendChild()
- Wróć do poprzedniego poziomu Obiekt Elements DOM HTML