Programy nasłuchujące zdarzeń HTML DOM JavaScript

Metoda addEventListener()

Przykład

Dodaj słuchacz zdarzenia, który zostanie uruchomiony po kliknięciu przycisku:

document.getElementById("myBtn").addEventListener("click", displayDate);

Spróbuj sam

addEventListener() Metoda przypisuje obsługuje zdarzenia do określonego elementu.

addEventListener() Metoda dodaje obsługuje zdarzenia do elementu bez zastępowania istniejących.

Możesz dodać wiele obsługi zdarzeń do jednego elementu.

Możesz dodać wiele programistów zdarzeń tego samego typu do jednego elementu, na przykład dwa zdarzenia "click".

Możesz dodać programistę zdarzeń do dowolnego obiektu DOM, a nie tylko do elementów HTML, na przykład do obiektu window.

addEventListener() Metoda ułatwia kontrolowanie, jak zdarzenia reagują na buforowanie.

Kiedy używasz addEventListener() Metoda oddziela JavaScript od znaczników HTML, co poprawia czytelność; nawet jeśli nie kontrolujesz znaczników HTML, pozwala dodać słuchacza zdarzenia.

Możesz użyć removeEventListener() Metoda pozwala łatwo usunąć słuchacza zdarzenia.

Gramatyka

element.addEventListener(event, function, useCapture);

Pierwszy parametr to typ zdarzenia (np. "click" lub "mousedown").

Drugi parametr to funkcja, którą musimy wywołać, gdy zdarzenie się stanie:

Trzeci parametr to wartość logiczna, która określa, czy używać buforowania zdarzeń, czy przechwytywania zdarzeń. Jest to parametr opcjonalny.

Uwaga:Nie używaj prefiksu "on" dla zdarzeń; używaj "click" zamiast "onclick".

Dodaj programistę zdarzeń do elementu

Przykład

Wyświetl "Hello World!" po kliknięciu na element użytkownika:

element.addEventListener("click", function(){ alert("Hello World!"); });

Spróbuj sam

Możesz również odwołać się do zewnętrznej "nazwanej" funkcji:

Przykład

Wyświetl "Hello World!" po kliknięciu na element użytkownika:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Spróbuj sam

Dodaj wiele programistów zdarzeń do tego samego elementu

addEventListener() Metoda pozwala dodać wiele zdarzeń do tego samego elementu, nie zastępując istniejących zdarzeń:

Przykład

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Spróbuj sam

Możesz dodać różne typy zdarzeń do tego samego elementu:

Przykład

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Spróbuj sam

Dodaj programistę zdarzeń do obiektu Window

addEventListener() Pozwala dodać słuchacza zdarzenia do dowolnego obiektu HTML DOM, takiego jak element HTML, obiekt HTML, obiekt window lub innego obiektu obsługiwanego zdarzeń, takiego jak obiekt XMLHttpRequest.

Przykład

Dodaj słuchacza zdarzenia, który jest wywoływany, gdy użytkownik zmienia rozmiar okna:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Spróbuj sam

Przekazywanie parametrów

Przy przekazywaniu wartości parametrów, użyj "anonimowej funkcji" jako parametru do wywołania określonej funkcji:

Przykład

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

Spróbuj sam

Propagacja wydarzeń pęcherzowa czy uchwytowa?

W HTML DOM istnieją dwa sposoby propagacji wydarzeń: pęcherz i uchwyt.

Propagacja wydarzeń to metoda określająca kolejność elementów, gdy występuje wydarzenie. Jeśli w elemencie <div> znajduje się <p>, a użytkownik kliknie element <p>, który element "click" powinien być przetworzony najpierw?

W pęcherzu, najpierw przetwarzane są wydarzenia najwewnętrzniejszych elementów, następnie tych bardziej zewnętrznych: najpierw przetwarzane są wydarzenia kliknięcia elementu <p>, następnie elementu <div>.

W uchwycie, najpierw przetwarzane są wydarzenia najzewnętrzniejszych elementów, następnie tych bardziej wewnętrznych: najpierw przetwarzane są wydarzenia kliknięcia elementu <div>, następnie elementu <p>.

W metodzie addEventListener() możesz określić typ propagacji, używając parametru "useCapture":

addEventListener(event, function, useCapture);

Domyślną wartością jest falseużywa się propagacji pęcherza, jeśli wartość ta ustawiona jest na truejeśli wartość ta wynosi true, używa się propagacji uchwytu.

Przykład

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Spróbuj sam

za pomocą metody removeEventListener()

removeEventListener() Metoda usuwa wydarzenia处理器, które zostały addEventListener() Dodane przez metodę wydarzenia处理器：

Przykład

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

Spróbuj sam

Obsługa przeglądarek

Liczby w tabeli określają pierwszą przeglądarkę wspierającą te metody.

Metoda
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Komentarz:IE 8, Opera 6.0 i wcześniejsze wersje nie obsługują addEventListener() i removeEventListener() Metoda. Jednak, dla tych specjalnych wersji przeglądarek, możesz użyć attachEvent()} Metoda dodawania event handlera do elementu, a następnie detachEvent() Metoda usuwania:

element.attachEvent(event, function);
element.detachEvent(event, function);

Przykład

Rozwiązanie wieloprzeglądarek

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Przeznaczone dla głównych przeglądarek, oprócz IE 8 i wcześniejszych wersji
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Przeznaczone dla IE 8 i wcześniejszych wersji
    x.attachEvent("onclick", myFunction);
}

Spróbuj sam

Podręcznik referencyjny obiektu zdarzenia HTML DOM

Aby uzyskać pełną listę wszystkich zdarzeń HTML DOM, odwiedź nasz kompletny Podręcznik referencyjny obiektu zdarzenia HTML DOM.