Programowanie w JavaScript Rusz głową!

528

Rozdział 11 .

Stosowanie domknięć jako procedur obsługi zdarzeń

Kliknij mnie! Bez użycia domknięcia

Najpierw pokażemy, jak można zaimplementować kod tego przykładu bez użycia domknięcia.

window.onload = function() {

var count = 0;

var message = ”KliknÈïeĂ mnie ”;

var div = document.getElementById(”message”);

var button = document.getElementById(”clickme”);

button.onclick = function() {

count++;

div.innerHTML = message + count + ” razy!”;

};

};

var count = 0;

window.onload = function() {

var button = document.getElementById(”clickme”);

button.onclick = handleClick;

};

function handleClick() {

var message = ”KliknÈïeĂ mnie ”;

var div = document.getElementById(”message”);

count++;

div.innerHTML = message + count + ” razy!”;

}

Zmienna count będzie musiała być zmienną globalną, bo gdyby

została zdefiniowana lokalnie wewnątrz funkcji handleClick

(czyli procedury obsługi zdarzeń click w przycisku), byłaby

inicjalizowana podczas obsługi każdego kliknięcia przycisku.

W funkcji obsługującej zdarzenie load

pobieramy element przycisku i określamy

procedurę obsługi zdarzeń clik, używając

właściwości onclick.

To jest procedura obsługi zdarzeń click

naszego przycisku.

Definiujemy zmienną message…

…pobieramy z DOM element <div>…

…inkrementujemy licznik kliknięć…

…i aktualizujemy zawartość elementu <div>,

wyświetlając w nim komunikat o liczbie

kliknięć.

Kliknij mnie! Z użyciem domknięcia

Przedstawiona powyżej wersja kodu, w której nie używamy domknięcia, działa doskonale, jej

jedynym problematycznym aspektem jest zastosowanie zmiennej globalnej, która potencjalnie

może przysporzyć problemów. Zmodyfikujmy zatem kod przykładu, by skorzystać z domknięcia,

a następnie spróbujmy porównać oba rozwiązania. Kod pokażemy poniżej, natomiast dokładniejszą

analizę jego działania zamieścimy po przetestowaniu.

Teraz wszystkie używane zmienne są zmiennymi

lokalnymi istniejącymi wewnątrz procedury

obsługi window.onload. Nie mogą zatem wystąpić

żadne konflikty nazw.

Określamy procedurę obsługi zdarzeń

click, którą będzie wyrażenie funkcyjne

zapisywane we właściwości onclick

przycisku. Dzięki temu wewnątrz tej

funkcji możemy odwoływać się do

wszystkich zmiennych: div, message

oraz count. (Pamiętaj o zasięgu

leksykalnym!).

Ta funkcja używa trzech zmiennych niezależnych: div, message oraz

count; dlatego też na potrzeby procedury obsługi zdarzeń click

tworzone jest domknięcie. A zatem rzeczywiście we właściwości

onclick przycisku zapisywane jest właśnie domknięcie.