Podsumowanie: Zdarzenia DOM

Dodawanie detektorów zdarzeń

Aby upewnić się, że przeglądarka wywoła określoną funkcję, gdy zdarzenie się odbędzie, musisz użyć document.addEventListener:

var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);

Możesz przekazać do funkcji wiele różnych ciągów znaków w pierwszym argumencie. Są one wypisane w artykule Typy Zdarzeń DOM.

Jeśli potrzebujesz informacji na temat zdarzenia możesz je znaleźć w obiekcie, który przeglądarka przekazuje zwrotnie do funkcji:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);

Obiekt zdarzenia ma wiele właściwości. Pełną listę możesz znaleźć tutaj.

Jeśli nadpisujesz zachowanie kliknięcia w link lub przycisk, który wysyła formularz, prawdopodobnie będziesz chciał zapobiec wykonania domyślnej akcji dla tych elementów. Możesz do tego użyć funkcji event.preventDefault().

Usuwanie detektorów zdarzeń

Jeśli nie potrzebujesz już danego wykrywacza zdarzenia, możesz go usunąć za pomocą removeEventListener:

var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("You clicked " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// later...
faceEl.removeEventListener("click", onFaceClick);

Chcesz dołączyć do dyskusji?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.