JavaScript - uchwyty zdarzeń dodawane przez skrypt

DZIAŁANIE:

Kod:

Ewentualne Objaśnienia:

Dotychczas dla każdego elementu dodawaliśmy w znaczniku uchwyt zdarzenia typu onclick itd. Jednak nie jest to do końca dobre (nie mówię, że zawsze ponieważ :
    - brak pewnej przejrzystości kodu
    - jeśli chcemy na przykład tak jak w przykładzie wywołać tę samą funkcję dla zdarzenia onClick dla kilku pól checkbox musielibyśmy dla każdego z nich powtarzać ten sam kod
    - inne powodu, o których myślę kiedyś w trakcie dalszych lekcji powiem ;-)

Obecnie przeglądarki pozwalają na umieszczenie wywołań funkcji wewnątrz uchwytów danych zdarzeń, na przykład aby wywołać funkcję Akcja() po kliknięciu DIVa o id="akcja" piszemy:
document.getElementById("akcja").onclick = Akcja;
Zauważ pewne różnice - onclick pisane bezwzględnie z małych liter (a nie onClick) - jest to konieczne w momencie przypisywania funkcji do uchwytu zdarzenia. Druga rzecz jest taka, że funkcja akcja jest wywołana bez nawiasów() - wynika z tego, że nie przesyłamy do niej żadnych argumentów. Jednak nie ma się co martwić funkcja ta ma dostęp do danych zdarzenia, które ją wywołało.
No i po raz kolejny mamy tutaj różnice między przeglądarkami - chodzi dokładnie o dostęp do znanego już wam obiektu event - w IE obiekt ten jest automatycznie umieszczany w zmiennej event więc możemy sobie to dopisać to zmiennej zapisem var mojeZdarzenie = event (w ciele funkcji) . W innych przeglądarkach zdarzenie jest po prostu przesyłane jako parametr do danej wywołanej funkcji, więc funkcja powinna w swej deklaracji zawierać parametr (wywołamy ją i tak bez niego w momencie przypisania do uchwytu).
Po uzyskaniu dostępu do obiektu event czasem przydaje się pobrać jakieś informacje o elemencie, który zdarzenie utworzył. w IE wykorzystujemy do tego właściwość srcElement . W innych przeglądarkach jest to target .

Może wydaje Ci się to skomplikowane, ale popatrzmy na nasz przykład :
- mamy formularz, a w nim 7 pól typu checkbox, każde pole ma jakąś tam sobie nazwę. Naszym celem jest wywołanie po kliknięciu w dane pole funkcji pokazAlert(). W tym celu piszemy sobie funkcję dodajZdarzenia() - pamiętaj o dodaniu onload="dodajZdarzenia();" w elemencie <body>
- funkcja ta 'pobiera' formularz oraz jego elementy potomne. Pętla przechodzi przez wszystkie te elementy i jeśli są to elementy typu input to przypisywana jest do jego uchwytu zdarzenia funkcja pokazAlert() [zwróć uwagę na wywołanie bez nawiasów mimo, iż funkcja zadeklarowana jest z parametrem]
- funkcja pokazAlert przyjmuje jako parametr zmienną zdarz - dla przeglądarek innych niż IE jest to po prostu zdarzenie przesłane jako ten parametr. Zmienna pole będzie się odnosić do zaznaczonego elementu.
- jeśli warunek !zdarz jest spełniony (czyli zdarzenie nie zostało przesłane) czyli jest to zapewne przeglądarka IE do zmiennej zdarz przypisujemy obiekt event oraz korzystamy ze wspomnianej właściwości srcElement.
- w przeciwnym razie od razu korzystamy z właściwości target
- wyświetlamy alert, a w nim nazwę (atrybut name) zaznaczonego pola

Do tej lekcji zalecam poczytać ten oto tekst : http://ferrante.pl/2007/03/03/praktyczne-wprowadzenie-do-javascript-6/ .