Metoda addEventListener() obiektu Document DOM HTML

Definicja i użycie

addEventListener() Metoda dołącza处理器 do wydarzenia.

Przykład

Przykład 1

Dodaj wydarzenie click do dokumentu:

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

Spróbuj sam

Prostsza gramatyka:

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

Spróbuj sam

Przykład 2

Możesz dodać wiele nasłuchiwaczy zdarzeń do dokumentu:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Spróbuj sam

Przykład 3

Możesz dodać różne typy zdarzeń:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Spróbuj sam

Przykład 4

Przy przekazywaniu parametrów używaj "anonicznej funkcji" do wywołania funkcji z parametrami:

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

Spróbuj sam

Przykład 5

Zmień kolor tła dokumentu:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Spróbuj sam

Przykład 6

Używaj metody removeEventListener():

// Dodaj nasłuchiwanie zdarzenia
document.addEventListener("mousemove", myFunction);
// Usuń nasłuchiwanie zdarzenia
document.removeEventListener("mousemove", myFunction);

Spróbuj sam

Gramatyka

document.addEventListener(type, function, capture)

Parametry

Parametry Opis
type

Wymagane. Nazwa zdarzenia.

Nie używaj prefiksu "on".

Używaj "click", zamiast "onclick".

Wszystkie zdarzenia HTML DOM są wymienione w:

Przeglądarka HTML DOM Event - podręcznik
function

Wymagane. Funkcja uruchamiana w przypadku wystąpienia zdarzenia.

Gdy zdarzenie występuje, obiekt zdarzenia jest przekazywany jako pierwszy parametr do funkcji.

Typ obiektu zdarzenia zależy od określonego zdarzenia. Na przykład, "click" zdarzenie należy do obiektu MouseEvent.
capture

opcjonalne (domyślnie = false).

  • true - Programista wykonuje się w etapie przechwytywania
  • false - Programista wykonuje się w etapie propagacji

Wartość zwracana

Brak.

Szczegółowe informacje techniczne

Ta metoda doda określony funkcję zdarzeniodnawcy do zbioru zdarzeniodnawców bieżącego węzła, aby obsługiwać określony typ zdarzenia type. Jeśli capture dla true, to zdarzeniodnawca jest zarejestrowany jako zdarzeniodnawca przechwytywania. Jeśli capture dla false, jest zarejestrowany jako zwykły zdarzeniodnawca.

addEventListener() może być wywoływana wielokrotnie, można zarejestrować wiele zdarzeniodnawców tego samego typu na jednym węźle. Ale należy zauważyć, że DOM nie może określić kolejności wywoływania wielu zdarzeniodnawców.

Jeśli funkcja zdarzeniodnawcy jest zarejestrowana na tym samym węźle z tym samym type i capture parametr jest zarejestrowany dwa razy, drugie zarejestrowanie zostanie zignorowane. Jeśli podczas przetwarzania zdarzenia na węźle jest zarejestrowany nowy zdarzeniodnawca na tym węźle, nowy zdarzeniodnawca nie zostanie wywołany dla tego zdarzenia.

Gdy Node.cloneNode() Metoda lub Document.importNode() Metoda kopiowania węzła Document nie kopiuje zdarzeniodnawców zarejestrowanych dla oryginalnego węzła.

Ta metoda jest również zdefiniowana w obiektach Document i Window, i działa podobnie.

Wsparcie przeglądarki

document.addEventListener To jest cecha DOM Level 2 (2001).

Wszystkie przeglądarki wspierają je 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()

Tutorial

HTML DOM EventListener

Pełna lista eventów DOM