Zdarzenia w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 6579 razy

Praktycznie każdy element HTML, który jest wyświetlany na stronie ma pewne atrybuty, pod które można podpiąć funkcję JavaScript. Taka funkcja czasami może przyjmować argumenty (co jest opcjonalne) i jest wywoływana zawsze w odpowiedzi na konkretne zdarzenie związane z danym elementem kodu HTML. Oto przykładowe, najczęściej wykorzystywane atrybuty związane z obsługą zdarzeń:

onchange - zdarzenie wywoływane, gdy dany element HTML uległ zmianie;
onclick - zdarzenie wywoływane, gdy dany element strony zostanie kliknięty;
onmouseover - zdarzenie wywoływane, gdy kursor myszy najedzie na element z nim związany;
onmouseout - zdarzenie wywoływane, gdy kursor myszy opuści dany element z nim związany;
onkeydown - zdarzenie wywoływane, gdy użytkownik wciśnie jakiś przycisk klawiatury;
onkeypress - zdarzenie wywoływane, gdy użytkownik wciśnie dowolny przycisk klawiatury oprócz: ALT, CTRL, SHIFT, ESC;
onkeyup - zdarzenie wywoływane, gdy użytkownik zwolni przycisk na klawiaturze;
onmousemove - zdarzenie wywoływane, gdy użytkownik przemieszcza kursor myszy nad danym elementem;
onload - zdarzenie wywoływane, gdy przeglądarka załaduje całą stronę.

Mały przykład:

Wynik działania powyższego kodu:

Nieco ciekawszym zdarzeniem jest onkeydown, ponieważ funkcja, którą można podpiąć pod to zdarzenie często będzie przyjmowała dodatkowy argument. Argument ten będzie obiektem zawierającym przydatne informacje na temat tego, jaki przycisk został wciśnięty przez użytkownika. Ważne jest, że aby to zdarzenie zostało wywołane konieczne jest uzyskanie przez dany element strony fokusa, czyli obsługi klawiatury. Oto prosty przykład:

var element = document.getElementById("example2"); element.addEventListener("keydown", function(event){ alert(event.keyCode); });

Wynik działania na elemencie typu <input>:

Równie ciekawym zdarzeniem jest onmousemove, gdzie z kolei można pozyskać położenie kursora myszy nad danym elementem, oto przykładowy kod:

var element = document.getElementById("example3"); element.addEventListener("mousemove", function(event){ var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; this.innerHTML = "X = " + x + " Y = " + y; });

Wynik działania powyższego kodu: