Zdarzenia to czynności, które użytkownik wykonuje podczas odwiedzania naszej strony. Przykładowymi zdarzeniami mogą być np. przesunięcie kursora na obrazek, kliknięcie jakiegoś linka, wysłanie formularza, zaznaczenie jakiegoś obiektu, naciśnięcie klawisza itp.
Można zaryzykować stwierdzenie, że żaden większy skrypt nie może obejść się bez zdarzeń. To właśnie one kreują tą pożądaną przez nas interaktywność…
Większość zdarzeń wywoływana jest przez użytkownika. Użytkownik kliknie to, użytkownik zrobi tamto itp. Istnieją też zdarzenia, które nie są bezpośrednio spowodowane przez użytkownika – np. zdarzenie load, które zachodzi np. gdy załaduje się strona.
Pisanie kodu js wewnątrz znaczników stwarza same problemy. Po pierwsze mieszanie kilku języków nigdy nie jest dobrym pomysłem, a szukanie wplecionych w html skryptów jest mordęgą. Po drugie podpinanie zdarzeń pod naście elementów jest bardzo uciążliwe. Zamiast wykonać jedną prostą pętlę po elementach na stronie musimy dłubać w html-js zupie. Nic przyjemnego. Po trzecie nie możemy trzymać naszego kodu js w odzielnych plikach. Ogólnie mieszanie js z html powoduje totalny bałagan w kodzie.
Dlatego właśnie o wiele lepszym pomysłem jest oddzielenie skryptów od html dzięki podpinaniu zdarzeń do elementów bezpośrednio w skryptach.
Element i element2 to elementy na stronie, dla których przypisujemy zdarzenia click i mouseover (zwróć uwagę na przedrostki on).
Funkcje zrobCos i zrobCosInnego będą wywoływane, gdy dla danych elementów zostaną odpalone dane zdarzenia (w naszym przypadku element zostanie kliknięty, a element2 zostanie wskazany kursorem).
Zauważyłeś, że przy podpinaniu funkcji do zdarzeń pomijamy nawiasy? Robimy tak dlatego, ponieważ nie chcemy odpalać funkcji, a tylko ją podpiąć pod dane zdarzenie.
Jeżeli chcesz usunąć dane zdarzenia dla danego obiektu, wystarczy, że przypiszesz mu wartość nul
Problem z tradycyjnym modelem polega na tym, że do jednego elementu możemy podpiąć tylko jedną funkcję dla jednego rodzaju zdarzenia. Rejestrując nową funkcję do danego zdarzenia nadpisujemy starą.
Możemy to oczywiście obejść (wspólna funkcja odpalająca), jednak jest to mało logiczne i przysparza kłopotów z późniejszym odrejestrowaniem takich zdarzeń.
Problemów takich nie mamy korzystając z „nowego” modelu rejestrowania zdarzeń opierającego się na metodzie addEventListener().
Przyjmuje ona 3 argumenty: typ zdarzenia, funkcja do wywołania, oraz trzeci (true/false) który włącza lub wyłącza bąbelkowe zachowanie zdarzeń. W praktyce trzeci argument zawsze pozostaje jako false, więc możemy go pominąć.
Kto programował choć przez chwilę w Action Script 3 – nie będzie miał żadnych problemów ze zrozumieniem tego typu obsługi zdarzań:
Źródło