Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 6585 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ń:

Mały przykład:

var element = document.getElementById("example1"); element.addEventListener("click", function(){ if(this.style.backgroundColor == "red"){ this.style.backgroundColor = "green"; }else{ this.style.backgroundColor = "red"; } });

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: