Latest web development tutorials
×

JavaScript kurs

JavaScript kurs JavaScript krótkie wprowadzenie JavaScript zwyczaj JavaScript eksport JavaScript gramatyka JavaScript oświadczenia JavaScript uwaga JavaScript zmienna JavaScript Typy danych JavaScript Przedmioty JavaScript funkcja JavaScript zakres JavaScript wydarzenie JavaScript sznur JavaScript operatorzy JavaScript porównać JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Typ konwersji JavaScript Wyrażenia regularne JavaScript błąd JavaScript Debugowanie JavaScript zmienny wyciąg JavaScript Tryb Strict JavaScript Zastosowanie niezgodne z przeznaczeniem JavaScript Uwierzytelnianie za pomocą formularzy JavaScript zarezerwowane słowa kluczowe JavaScript JSON JavaScript void JavaScript Kod Specyfikacja

JS funkcja

JavaScript definicja funkcji JavaScript Argumenty funkcji JavaScript wywołanie funkcji JavaScript zamknięcia

JS HTML DOM

DOM krótkie wprowadzenie DOM HTML DOM CSS DOM wydarzenie DOM EventListener DOM element

JS zaawansowane Tutorial

JavaScript Przedmioty JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Przedmioty

JS przeglądarka BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript muzyka pop JavaScript Tymczasowy zdarzenia JavaScript Cookies

JS magazyn

JavaScript magazyn JavaScript test jQuery JavaScript test Prototype

JS Przykłady

JavaScript Przykłady JavaScript instancja obiektu JavaScript Przeglądarka Instancja obiektu JavaScript HTML DOM Przykłady JavaScript streszczenie

JS Reference Manual

JavaScript Przedmioty HTML DOM Przedmioty

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 .