1. Home
  2. JavaScript HTML DOM EventListener

Najlepszy samouczek JavaScript HTML DOM EventListener W 2024 r. W tym samouczku możesz dowiedzieć się Metoda addEventListener (),Przykłady,gramatyka,Oryginalne elementy dodać obsługi zdarzeń,Przykłady,Przykłady,Dodawanie wielu obsługi zdarzeń do tego samego elementu,Przykłady,Przykłady,Dodawanie obsługi zdarzeń do obiektu window,Przykłady,Przekazywanie parametrów,Przykłady,Przechwytywanie zdarzeń lub zdarzenie propagacji?,Przykłady,Metoda removeEventListener (),Przykłady,Pomoc Browser,Przykłady,HTML DOM Event Object Reference,

JavaScript HTML DOM EventListener

Metoda addEventListener ()

Przykłady

Słuchanie zdarzeniach wyzwalanych gdy użytkownik kliknie przycisk:

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

Spróbuj »

Metoda addEventListener () służy do dodawania obsługi zdarzeń do określonego elementu.

Metoda addEventListener () w celu dodania obsługi zdarzeń nie zastąpić istniejący obsługi zdarzeń.

Można dodać wiele programów obsługi zdarzeń do jednego elementu.

Możesz dodać więcej niż jeden z tego samego rodzaju obsługi zdarzeń do tego samego elementu, takie jak: dwa "kliknięcia" imprezy.

Możesz dodać obiekty do każdego słuchacza zdarzenia DOM, a nie tylko elementy HTML. Takich jak: okna obiektu.

Metoda addEventListener () może łatwiej kontrolować zdarzenia (propagacji i przechwytywania).

Podczas korzystania z metody addEventListener (), znaczniki HTML JavaScript, od lewej do rzeźbić, bardziej czytelny, w przypadku braku znaczników HTML Control może również dodać detektory zdarzeń.

Można użyć metody removeEventListener (), aby usunąć detektor zdarzeń.

gramatyka

Element .addEventListener (zdarzenie, funkcja, useCapture );

Pierwszym parametrem jest rodzaj (takie jak "click" lub "mousedown") wydarzenia.

Drugi argument jest wywołanie funkcji jest wyzwalany po zdarzeniu.

Trzeci parametr to wartość logiczna, która służy do opisania pęcherzyków zdarzenie lub schwytania. Ten parametr jest opcjonalny.

uwaga Uwaga: Nie używaj "on" prefiks. Na przykład za pomocą "kliknięcia", zamiast "onclick".

Oryginalne elementy dodać obsługi zdarzeń

Przykłady

Gdy użytkownik kliknie na element pop-up, gdy "Hello World!":

Element .addEventListener ( "click", funkcja () {alert ( "Hello World!");});

Spróbuj »

Można użyć nazwy funkcji odwołać funkcję zewnętrznego:

Przykłady

Gdy użytkownik kliknie na element pop-up, gdy "Hello World!":

Element .addEventListener ( "click", myFunction );

Funkcja myFunction () {
alert ( "Hello World!");
}

Spróbuj »

Dodawanie wielu obsługi zdarzeń do tego samego elementu

Metoda addEventListener () pozwala na dodanie wielu zdarzeń do tych samych elementów, a nie zastępować istniejące zdarzenia:

Przykłady

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

Spróbuj »

Można dodać do tych samych elementów w różnych typach zdarzeń:

Przykłady

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

Spróbuj »

Dodawanie obsługi zdarzeń do obiektu window

Metoda addEventListener () pozwala na dodawanie obiektów w przypadku słuchacza HTML DOM, HTML DOM obiektów takich jak: elementy HTML, dokumentów HTML, okno obiektu. Obiekty zdarzeń lub inne koszty, takie jak: obiekt XMLHttpRequest.

Przykłady

Gdy użytkownik ustawia rozmiar okna, aby dodać detektory zdarzeń:

window.addEventListener ( "rozmiar", function () {
. Document.getElementById ( "demo") innerHTML = Jakiś tekst;
});

Spróbuj »

Przekazywanie parametrów

Po przejściu wartości parametru, należy użyć wywołania funkcji z parametrami "funkcją anonimową":

Przykłady

Element .addEventListener ( "click", funkcja () {MyFunction (P1, P2);});

Spróbuj »

Przechwytywanie zdarzeń lub zdarzenie propagacji?

Dostawa wydarzenie na dwa sposoby: bulgotanie i przechwytywania.

Kolejność dostawy wydarzeniem elementów opisanych wyzwalacza zdarzeń. Jeśli <p> ​​Element do elementu <div> element użytkownik kliknie <p>, którego elementem imprezy "kliknięcie", aby być wyzwalany jest?

Przepuszczając impreza będzie stanowić element wewnętrzny jest wywoływany, a następnie wywołać elementów zewnętrznych, w tym: a zdarzenie click <p> element jest uruchamiany, potem wyzwala zdarzenie click <div>.

W zdobyciu impreza będzie stanowić element zewnętrzny jest uruchamiany, to zdarzenie jest wywoływane elementy wewnętrzne, czyli: <div>, aby wywołać zdarzenie click, a następnie wywołać zdarzenie click <p>.

addEventListener () aby określić parametr "użyj przechwytu", aby ustawić typ dostawy:

addEventListener (zdarzenie, funkcja, useCapture) ;

Wartością domyślną jest false, która bulgocze się, gdy wartość ta jest prawdziwa, użyć zdarzenia uchwycić transfer.

Przykłady

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

Spróbuj »

Metoda removeEventListener ()

removeEventListener () w celu usunięcia metodę addEventListener () w celu dodania obsługi zdarzeń:

Przykłady

Element .removeEventListener ( "mousemove" myFunction );

Spróbuj »

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji metody.

sposób
addEventListener () 1,0 9,0 1,0 1,0 7,0
removeEventListener () 1,0 9,0 1,0 1,0 7,0

Uwaga: IE 8 i wcześniejsze wersje IE, Opera 7.0 i wcześniejsze wersje nie obsługują addEventListener () i removeEventListener () metody. Jednak ten rodzaj wersji przeglądarki można stosować metodę detachEvent (), aby usunąć obsługi zdarzeń:

element.attachEvent (zdarzenie, funkcja);
element.detachEvent (zdarzenie, funkcja);

Przykłady

Rozwiązanie cross-browser:

var x = document.getElementById ( "myBtn");
if (x.addEventListener) {// wszystkimi popularnymi przeglądarkami, z wyjątkiem IE 8 i wcześniejszymi wersjami
x.addEventListener ( "click", myFunction);
} Else if () {// x.attachEvent IE 8 i wcześniejszymi wersjami
x.attachEvent ( "onclick", myFunction);
}

Spróbuj »

HTML DOM Event Object Reference

Wszystkie zdarzenia HTML DOM, można zobaczyć nasze kompletne HTML DOM Event Object Reference .

Hot Tutorials

Contact US

JavaScript HTML DOM EventListener
10/30