EventListener#
EventListener.handleEvent()#
Metoda handleEvent() jest częścią obiektu, który jest obowiązkowym argumentem przekazywanym w czasie rejestrowania lub usuwania uchwytów zdarzeń. To ona właśnie stanowi funkcję zwrotną dla danego uchwytu zdarzenia.
Interfejs EventListener jest specyficzny ponieważ jest typu zwrotnego (callback interface). W praktyce oznacza to tyle, że nie istnieje żadna gotowa metoda pozwalająca utworzyć taki obiekt. To my musimy utworzyć dowolny obiekt JS i rozszerzyć go o pewne elementy (w tym wypadku metodą o nazwie handleEvent). W praktyce całość można rozwiązać na kilka sposobów, dlatego w dalszej części przedstawię ich najpopularniejsze warianty.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
// Wariant obiektowy (obiekt klasyczny)
var callback1 = {
handleEvent: function(e){
kod funkcji
}
};
// Wariant funkcyjny (obiekt funkcyjny)
var callback2 = function(e){
kod funkcji
};gdzie poszczególne człony oznaczają:
callback1, callback2- deklaracja funkcji zwrotnej na dwa różne sposoby.e- pierwszy parametr w metodzie, pod którym dostępny będzie obiekt zdarzenia w kodzie funkcji (nazwę można podać dowolną).kod funkcji- właściwy kod dla funkcji zwrotnej.
Najlepiej omówić wszystko od podstaw jeszcze raz. W czasie rejestrowania lub kasowania uchwytu zdarzenia za pomocą metod Event.addEventListener() i Event.removeEventListener() musimy przekazać trzy argumenty: typ, funkcję zwrotną oraz przechwytywanie. Z typem (łańcuch znakowy) i przechwytywaniem (wartość boolowska) nie ma żadnego problemu. Inaczej wygląda sytuacja w przypadku funkcji zwrotnej. W zasadzie należy tutaj przekazać obiekt, który będzie można w odpowiedniej chwili wywołać. Obiekt ten należy utworzyć samodzielnie przy wykorzystaniu podstawowych poleceń danego środowiska uruchomieniowego.
Zgodnie z zapisem składniowym umieszczonym wyżej można to zrobić na dwa podstawowe sposoby:
- Za pomocą zwykłego obiektu JS z dodatkową metodą o nazwie
handleEvent(nie można przekazać innej nazwy), która będzie wywoływana przy przetwarzaniu uchwytu zdarzenia. W metodzie tej należy umieścić cały kod przeznaczony do wykonania w chwili przechwycenia zdarzenia. - Za pomocą zwykłej funkcji, która będzie wywoływana przy przetwarzaniu uchwytu zdarzenia. W funkcji tej należy umieścić cały kod przeznaczony do wykonania w chwili przechwycenia zdarzenia. Nasza funkcja tak naprawdę jest metodą jakiegoś obiektu (globalnego lub kontekstu wykonania).
Obydwa sposoby dają dużą swobodę. Do metod tworzących i usuwających nasłuchy zdarzeń, jako wywołanie zwrotne, można bezpośrednio przekazywać obiekty anonimowe, funkcje anonimowe, wyrażenia funkcji jak i deklaracje funkcji. Nie ma w tej kwestii żadnych ograniczeń. Należy mieć jedynie na uwadze, że stosowanie anonimowych danych może utrudniać późniejsze usuwanie nasłuchów zdarzeń.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var button = document.getElementById("press");
var info = document.getElementById("info");
var test1 = function(e){
info.innerHTML += "Pierwszy uchwyt dla przycisku (e.type: " + e.type + ")." + "<br><br>";
};
function test2(e){
info.innerHTML += "Drugi uchwyt dla przycisku (e.type: " + e.type + ")." + "<br><br>";
}
var test3 = {
handleEvent: function(e){
info.innerHTML += "Trzeci uchwyt dla przycisku (e.type: " + e.type + ")." + "<br><br>";
}
};
// Uchwyty z referencjami do funkcji zwrotnej
button.addEventListener("click", test1, false);
button.addEventListener("click", test2, false);
button.addEventListener("click", test3, false);
// Uchwyt z anonimową funkcją zwrotną
button.addEventListener("click", function(e){
info.innerHTML += "Czwarty uchwyt dla przycisku (e.type: " + e.type + ")." + "<br><br>";
}, false);
// Uchwyt z anonimowym obiektem (posiada metodę zwrotną)
button.addEventListener("click", {
handleEvent: function(e){
info.innerHTML += "Piąty uchwyt dla przycisku (e.type: " + e.type + ")." + "<br><br>";
}
}, false);
}
</script>
</head>
<body>
<p>Kliknij w przycisk by wywołać procedury obsługi wielu uchwytów zdarzeń.</p>
<input id="press" type="button" value="Kliknij mnie!">
<p style="color: blue;">Szczegółowe informacje:</p>
<p id="info"></p>
</body>
</html>Interfejs Web IDL#
void handleEvent(Event event);