JavaScript HTML DOM EventListener
Metoda addEventListener()
Przykład
Dodaj detektor zdarzeń, który uruchamia się, gdy użytkownik kliknie przycisk:
document.getElementById("myBtn").addEventListener("click", displayDate);
Metoda addEventListener()dołącza procedurę obsługi zdarzeń do określonego elementu.
Metoda addEventListener()dołącza procedurę obsługi zdarzeń do elementu bez zastępowania istniejących programów obsługi zdarzeń.
Do jednego elementu można dodać wiele programów obsługi zdarzeń.
Do jednego elementu można dodać wiele obsługi zdarzeń tego samego typu, czyli dwa zdarzenia typu „click”.
Detektory zdarzeń można dodać do dowolnego obiektu DOM, nie tylko do elementów HTML. czyli obiekt okna.
Metoda addEventListener()ułatwia kontrolowanie reakcji zdarzenia na bąbelkowanie.
Podczas korzystania z tej addEventListener()metody JavaScript jest oddzielony od znaczników HTML, dla lepszej czytelności i umożliwia dodawanie detektorów zdarzeń, nawet jeśli nie kontrolujesz znaczników HTML.
removeEventListener()Korzystając z tej metody, można łatwo usunąć detektor zdarzeń .
Składnia
element.addEventListener(event, function, useCapture);
Pierwszy parametr to typ zdarzenia (np. „ click” lub „ mousedown” lub dowolne inne zdarzenie HTML DOM ).
Drugi parametr to funkcja, którą chcemy wywołać po wystąpieniu zdarzenia.
Trzeci parametr to wartość logiczna określająca, czy używać propagacji zdarzeń, czy przechwytywania zdarzeń. Ten parametr jest opcjonalny.
Zauważ, że nie używasz przedrostka "on" dla zdarzenia; użyj " click" zamiast " onclick".
Dodaj obsługę zdarzeń do elementu
Przykład
Alert „Witaj świecie!” gdy użytkownik kliknie element:
element.addEventListener("click", function(){ alert("Hello World!"); });
Możesz również odwołać się do zewnętrznej „nazwanej” funkcji:
Przykład
Alert „Witaj świecie!” gdy użytkownik kliknie element:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Dodaj wiele programów obsługi zdarzeń do tego samego elementu
Metoda addEventListener()pozwala na dodanie wielu zdarzeń do tego samego elementu, bez nadpisywania istniejących zdarzeń:
Przykład
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Do tego samego elementu możesz dodać zdarzenia różnego typu:
Przykład
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Dodaj obsługę zdarzeń do obiektu okna
Metoda addEventListener()umożliwia dodanie detektorów zdarzeń do dowolnego obiektu HTML DOM, takiego jak elementy HTML, dokument HTML, obiekt window lub inne obiekty obsługujące zdarzenia, takie jak xmlHttpRequestobiekt.
Przykład
Dodaj detektor zdarzeń, który uruchamia się, gdy użytkownik zmienia rozmiar okna:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Przekazywanie parametrów
Przekazując wartości parametrów, użyj „anonimowej funkcji”, która wywołuje określoną funkcję z parametrami:
Przykład
element.addEventListener("click", function(){ myFunction(p1, p2); });
Propagowanie zdarzeń czy przechwytywanie zdarzeń?
Istnieją dwa sposoby propagacji zdarzeń w modelu DOM HTML: propagacja i przechwytywanie.
Propagacja zdarzenia to sposób na zdefiniowanie kolejności elementów w momencie wystąpienia zdarzenia. Jeśli masz element <p> wewnątrz elementu <div>, a użytkownik kliknie element <p>, zdarzenie „click” którego elementu powinno zostać obsłużone jako pierwsze?
Podczas propagacji najpierw obsługiwane jest zdarzenie najbardziej wewnętrznego elementu, a następnie zewnętrzne: najpierw obsługiwane jest zdarzenie click elementu <p>, a następnie zdarzenie click elementu <div>.
Przy przechwytywaniu najbardziej zewnętrznego zdarzenia jest obsługiwane najpierw, a następnie wewnętrzne: zdarzenie click elementu <div> będzie obsługiwane jako pierwsze, a następnie zdarzenie click elementu <p>.
Za pomocą metody addEventListener() możesz określić typ propagacji za pomocą parametru „useCapture”:
addEventListener(event, function, useCapture);
Wartość domyślna to false, co spowoduje użycie propagacji bąbelków, gdy wartość jest ustawiona na true, zdarzenie korzysta z propagacji przechwytywania.
Przykład
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Metoda removeEventListener()
Metoda removeEventListener()usuwa programy obsługi zdarzeń, które zostały dołączone za pomocą metody addEventListener():
Przykład
element.removeEventListener("mousemove", myFunction);
Dokumentacja obiektu zdarzenia DOM HTML
Listę wszystkich zdarzeń HTML DOM można znaleźć w naszej pełnej dokumentacji obiektu HTML DOM Event Object Reference .