Obsługa zdarzeń w kodzie HTML

Możemy określić zdarzenie wewnątrz znacznika HTML. Zobacz poniższy przykład.

Przykład 1 - Obsługa zdarzeń w kodzie HTML

<a href="adres-strony" onclick="alert('Działa!'); return false;">Kliknij tu</a>

Kliknij tu

Nie polecam tej metody, gdyż mieszamy tutaj dwa języki: język strony HTML i język JavaScript i to w jednej linijce.
Jest to rozwiązanie niezbyt eleganckie, mało czytelne, jednak działające i jeszcze do niedawna bardzo często stosowane.
Przy wielości tego typu elementów poprawianie kodu strony może przysporzyć wiele problemów, nie mówiąc już o możliwości przechowywania kodu skryptu w odrębnym pliku.

Obsługa zdarzeń jako właściwość obiektu

Jest to starsza metoda obsługi zdarzeń.
Polega na przypisaniu do danego zdarzenia własnej funkcji lub funkcji anonimowej jako właściwości danego obiektu.

Pamiętaj, że aby mieć pewność, że kod nie odwołuje sie do obiektów, które jeszcze nie zostały wczytane do pamięci przeglądarki, kod obsługi zdarzeń najlepiej wstawiać na końcu kodu strony lub umieszczać go w module.

W tym modelu definiujemy własną funkcję, a następnie przypisujemy ją po nazwie (bez nawiasów, gdyż nie zamierzamy wywoływać tej funkcji) do danego elementu jako właściwość tego obiektu.

Przykład 2 - przypisanie do zdarzenia obiektu własnej funkcji

<div id="przycisk-1">Kliknij tu</div>
<script>
function mojaFunkcja() {
	 alert('Kliknięto na obiekcie div!');
}

var element = document.getElementById('przycisk-1');
element.onclick = mojaFunkcja;
</script>

Przykład 3 - przypisanie do zdarzenia obiektu samowywołującej się funkcji

<div id="przycisk-2">Kliknij tu</div>
<script>
var element = document.getElementById('przycisk-2');
element.onclick = function() {
alert('Dla samowywołującej się funkcji też działa!!');
};
</script>

W ten sposób możemy przypisywać obsługę zdarzeń do dowolnego obiektu na stronie.

Usunięcie przypisania danej funkcji do zdarzenia odbywa się poprzez przypisanie do tego zdarzenia wartości null.

Przykład 4 - resetowanie obsługi zdarzenia

<script>
element.zdarzenie = null;
</script>

Ten sposób obsługi zdarzeń ma jednak wadę.
Możemy przypisać do danego zdarzenia tylko jedną funkcję.
Dlatego polecam trzecie rozwiązanie

addEventListener() i removeEventListener()

Metoda addEventListener() przypisuje do elementu zdarzenie opisane daną funkcją.
Składnia tej metody jest następująca:

Argument nazwa zdarzenia jest jedną z predefiniowanych nazw zdarzeń w JavaScript, ale bez przedrostka "on", funkcja jest nazwą zdefiniowanej przez programistę wcześniej funkcji lub jest to funkcja anonimowa, natomiast parametr przyjmuje wartość true lub false, jeżeli chcemy, aby zachodziła propagacja zdarzenia na elementy dzieci w strukturze DOM.

Metoda removeEventListener() wyrejestrowuje dla elementu zdarzenie opisane daną funkcją.
Składnia tej metody jest następująca:

Możemy tą metodą przypisywać wiele zdarzeń do jednego elementu.

Przykład 5 - korzystanie z metody addEventListener().

Na początku definiujemy dwie własne funkcje o nazwach showMe i zmienstyl.
W kolejnym kroku wyszukujemy elementu strony o identyfikatorze przycisk-3 i przypisujemy do niego aż trzy zdarzenia.
Pierwsze wywołuje funkcję showMe, drugie zmienStyl, a trzecie funkcje anonimową, która ma za zadanie zmienić styl padding.

Możemy później usunąć zdarzenia (poza trzecim ze względu na użycie funkcji anonimowej) używając zapisu:
element.removeEventListener('click', showMe) i element.removeEventListener('click', zmienStyl).

<div id="przycisk-3" style="cursor:pointer; margin:10px 0; display:block;" onClick="myFunction5();">Kliknij tu</div>

<script>
function showMe() {
alert('Kliknięto mnie!');
}
function zmienStyl() {
 this.style.background = 'yellow';
}

function function5 () {
	element = document.getElementById('przycisk-3');
	element.addEventListener('click', showMe);
	element.addEventListener('click', zmienStyl);
	element.addEventListener('click', function() {this.style.padding = '20px'; this.innerHTML = 'Gotowe!';})
}	
</script>

Warto zauważyć, że w naszych funkcjach użyliśmy słowa kluczowego this, które reprezentuje dany obiekt, który wywołał daną funkcję.
W ten sposób nasze funkcje będą działały na obiektach, dla których dane zdarzenie zajdzie.

Odczyt właściwości zdarzeń

Aby odczytać właściwość danego zdarzenia, na przykład pozycje kursora myszy w zdarzeniu mousemove albo który klawisz myszki został naciśnięty w zdarzeniu click posługujemy się parametrem (pseudoparametrem) przekazywanym do deklarowanej funkcji obsługi zdarzenia.
Do odczytu właściwości zdarzenia służy obiekt window.event.

Przykład 6 - odczyt właściwości zdarzeń

Dzięki pseudoparametrowi zdarzenie (możemy go dowolnie nazwać) uzyskujemy dostęp do właściwości zdarzenia.
W tym przykładzie dostajemy się do właściwości type zdarzenia i wypisujemy go w oknie alertu.

<script>
function mojaFunkcja1(zdarzenie) {
if (!zdarzenie) {var zdarzenie = window.event;} 
return zdarzenie.type;
}

function myFunction6() {
	elem = document.getElementById('przycisk-4');
	elem.addEventListener('click', function(zdarzenie){
		alert('Jest to zdarzenie ' + mojaFunkcja1(zdarzenie));
	});
}	
</script>