Metoda addEventListener() obiektu 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";
}

Spróbuj sam

Przykład 2

Código más compacto:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Spróbuj sam

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".


Pełna lista zdarzeń DOM

function Wymagane. Funkcja uruchamiana w momencie zdarzenia.
useCapture

Opcjonalne (domyślne = false).

  • false - Wykonawca w fazie buklowania.
  • true - Wykonawca w fazie przechwytywania.

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);

Spróbuj sam

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);

Spróbuj sam

Przykład 5

Aby przekazać wartości parametrów, użyj "funkcji anonimowych":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Spróbuj sam

Przykład 6

Zmień kolor tła elementu <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Spróbuj sam

Przykład 7

Różnica między bąbelkowaniem a przechwytywaniem:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Spróbuj sam

Przykład 8

Usuwanie programistów zdarzeń:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Spróbuj sam

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:

Metoda addEventListener()

Metoda removeEventListener()

Metody dokumentu:

Metoda addEventListener()

Metoda removeEventListener()

Kurs:

HTML DOM EventListener

Pełna lista zdarzeń DOM