JavaScript HTML DOM EventListener
Metoda addEventListener ()
Przykłady
Słuchanie zdarzeniach wyzwalanych gdy użytkownik kliknie przycisk:
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
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: 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!":
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!":
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", mySecondFunction );
Spróbuj »
Można dodać do tych samych elementów w różnych typach zdarzeń:
Przykłady
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ń:
. 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ą":
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:
Wartością domyślną jest false, która bulgocze się, gdy wartość ta jest prawdziwa, użyć zdarzenia uchwycić transfer.
Przykłady
Spróbuj »
Metoda removeEventListener ()
removeEventListener () w celu usunięcia metodę addEventListener () w celu dodania obsługi zdarzeń:
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.detachEvent (zdarzenie, funkcja);
Przykłady
Rozwiązanie cross-browser:
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 .