Zdarzenia 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. Javascript udostępnia kilkanaście typów zdarzeń, dzięki którym jesteśmy panować nad tym, co się dzieje na stronie: Zdarzenie: Opis: onabort Występuje, gdy zaniechano ładowania strony onblur występuje, gdy obiekt przestał być aktywny ondblclick występuje, gdy podwójnie klikniemy na obiekt onchange występuje, gdy obiekt zmienił swoją zawartość onclick występuje, gdy obiekt został kliknięty onerror występuje, gdy wystąpił błąd w skrypcie onfocus występuje, gdy obiekt stał się aktywny (został wybrany) onkeydown występuje naciśnięcia klawisza na klawiaturze onkeyup wyetępuje gdy puścimy klawisz na klawiaturze onload występuje, gdy obiekt został załadowany onmouseover występuje, gdy kursor znalazł się na obiekcie onmouseout występuje, gdy kursor opuścił obiekt onselect występuje, gdy zawartość obiektu została zaznaczona onsubmit występuje, gdy formularz został wysłany onunload występuje, gdy zmieniono wyświetlaną stronę Aby zdarzenie było dostępne dla danego obiektu, musimy je dla niego zarejestrować. Istnieje kikla metod na rejestrację zdarzenia dla obiektu. Rejestrowanie zdarzenia inline Metoda inline przypisywania zdarzeń polega na określeniu zdarzenia wewnątrz znacznika. Na przykład: <a href="jakasstrona.html" onclick="alert(' Kliknąłeś link! ')"> kliknij </a> Od tej chwili po kliknięciu na link zostanie wywołane zdarzenie click, które wyświetli okienko dialogowe Alert. Ten model rejestrowania zdarzeń jest zły. Po pierwsze miesza nasze skrypty z treścią html (co
jest dużym błędem), po drugie nie przekazuje automatycznie do funkcji obiektu, który funkcję wywołał (patrz podrozdział this). Możemy to obejść przekazując do funkcji element jako argument np. wypisz(this), jednak wciąż nie jest to dobre rozwiązanie. Jako super bohaterowie będziemy korzystać tylko z dobrych metod, dlatego pozostawiamy ten sposób w domu starców i przechodzimy do ciekawszych sposobów obsługi zdarzeń. Oddzielenie javascript od html - tradycyjny model rejestrowania zdarzenia 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. Ogólna konstrukcja przypisania zdarzenia ma postać: var element = document.getelementbyid('guzik'); element.onclick = zrobcos element2.onmouseover = zrobcosinnego 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ść null: element.onclick = null Przykładowo przypiszmy guzikowi zdarzenie onclick: <input type="button" id="guzik" value="kliknij" />... <script type="text/javascript"> function wypisz() { alert(' zostałem kliknięty! ');
document.getelementbyid('guzik').onclick = wypisz </script> W poniższym przykładzie przypisaliśmy do zdarzenia anonimową funkcję (czyli taką, którą tworzymy bezpośrednio przy deklaracji zdarzenia). Funkcja taka może odpalać kilka funkcji naraz oraz może pobierać parametry (co przy deklaracji bez nawiasów jest niemożliwe). function wypisz(tekst) { alert(tekst); document.getelementbyid('guzik').onclick = function() { wypisz('przykładowy tekst') Kolejny przykład pokazuje jak możemy przypisywać zdarzenia do wielu obiektów. Wystarczy zastosować pętlę: var akapity = document.getelementsbytagname('p'); for (i=0; i<akapity.length; i++) { akapity[i].onclick = function () { this.style.color = 'red'; this.style.backgroundcolor = 'yellow'; Od tej pory gdy klikniemy na którykolwiek akapit na stronie, zmienimy jego kolor na czerwony z ciemnym tłem. Poza rejestrowaniem zdarzeń dla elementów, możemy też takie zdarzenia wywołać - np. onclick: element.onclick() Powyższy kod wywoła "kliknięcie" na element. Nowy model rejestracji zdarzeń 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ń: Zarejestrowanie nowego zdarzenia ma postać:
var element = document.getelementbyid('guzik'); //rejestrujemy 3 zdarzenia click dla elementu element.addeventlistener('click', startdragdrop, false) element.addeventlistener('click', wypiszcos, false) element.addeventlistener('click', function() { this.style.color = 'red';, false); Od tej pory po pojedynczym kliknięciu zostaną wywołane wszystkie trzy funkcje. Jako funkcja możemy podać nazwę funkcji do wywołania, lub stworzyć funkcję anonimową. Zalecam korzystanie z oddzielnych funkcji, gdyż wtedy łatwiej będziemy mogli takie pojedyncze funkcje odrejestrować. Do odrejestrowania funkcji z danego zdarzenia służy metoda.removeeventlistener(), która przyjmuje dokładnie takie same argumenty jakie były użyte do zarejestrowania danego zdarzenie za pomocą addeventlistener. Aby więc odrejestrować nasze powyższe funkcje, skorzystamy z kodu: element.removeeventlistener('click', startdragdrop, false); element.removeeventlistener('click', wypiszcos, false); element... Niestety nasza ostatnia funkcja jest funkcją anonimową - nie ma nazwy i nie jest podstawiona pod żadną zmienną. Nie jesteśmy więc w stanie przekazać dla removeeventlistener drugiego parametru, tym samym nie jesteśmy w stanie odrejestrować tej funkcji!. Co więc zrobić? Nie bałaganić i nie iść na łatwiznę. Prawdziwie ładny kod powinien unikać funkcji anonimowych, a stosować funkcje z nazwami - zarówno przy podpinaniu ich jak i odpinaniu. Ok. Wiem. To jest Javascript. Przy małych skryptach używanie funkcji anonimowych jest i wygodne i zwyczajnie się sprawdza. Warto jednak wpoić sobie zasadę podpinania istniejących funkcji. Czasami uratuje wam to życie, a i wasz kod będzie ładniejszy. Na dziewczynach wrażenia może nie zrobicie, ale na programistach jak najbardziej. Co jednak z przekazywaniem do takich funkcji parametrów? Jest na to bardzo proste rozwiązanie. Dane parametry nie powinny być wyssane z palca. Powinny być brane skądś - np z danego obiektu (lub np z wyniku jakiejś funkcji): function wypiszcos() { alert(this.tekst); var element = document.getelementbyid('guzik') element.tekst = 'To jest tekst do wypisania'; element.addeventlistener('click', wypiszcos, false); Na zakończenie tych wywodów kawałek kodu, który demonstruje użycie powyższych metod: <div> <input type="button" value="wpierw podepnij zdarzenie!" id="buttontest" /> <input type="button" value="podepnij zdarzenie" id="buttontestadd" />
<input type="button" value="odepnij zdanierze" id="buttontestremove" /> </div> <script> var buttontest = document.getelementbyid('buttontest') buttontest.tekst = 'To jest jakis tekst do wypisania'; var buttonadd = document.getelementbyid('buttontestadd'); var buttonremove = document.getelementbyid('buttontestremove'); function wypisztekst() { alert(this.tekst); function addtestevent() { buttontest.value = 'No dobra. Można klikać!'; buttontest.addeventlistener('click', wypisztekst, false); function removetestevent() { buttontest.value = 'Wpierw podepnij zdarzenie!'; buttontest.removeeventlistener('click', wypisztekst, false); buttonadd.addeventlistener('click', addtestevent, false); buttonremove.addeventlistener('click', removetestevent, false); </script> Problemy z nowym modelem rejestracji zdarzeń Główny problem z tym modelem rejestracji polega na tym, że starsze przeglądarki IE (<=8) stosują swój własny model :(. Aby zarejestrować zdarzenie dla IE, skorzystamy z metody element.attachevent('onclick', dosomething). Pierwszy atrybut to nazwa zdarzenia, poprzedzona przedrostkiem "on". Drugi to nazwa funkcji, która zostanie wywołana. Model IE nie przewiduje wyłączania bąbelkowego zachowania się zdarzeń, więc trzeciego parametru nie ma. Aby odrejestrować zdarzenie dla IE, użyjemy metody element.detachevent('onclick',spyonuser) Z pewnością nie za bardzo będzie nam pasowało co chwile sprawdzanie, czy mamy do czynienia z IE, czy z normalnymi przeglądarkami. Dlatego napiszmy funkcję dodającą zaawansowaną rejestrację zdarzeń dla wszystkich modeli: function addevent(o, zdarzenie, funkcja) { if (o.addeventlistener) { o.addeventlistener(zdarzenie, funkcja, false); else if (o.attachevent) { o.attachevent("on" + zdarzenie, funkcja); else { eval(o + ".on" + zdarzenie + "=" + funkcja + ";");
Działanie funkcji jest bardzo proste. Jeżeli przeglądarka obsługuje addeventlistener, wtedy korzystamy z tego modelu. Jeżeli korzysta z attachevent, korzystamy z tego modelu, dodając do nazwy zdarzenia przedrostek "on". Jeżeli oba modele nie zostały wykryte, wówczas wykonujemy funkcję eval, do której przekazujemy ciąg tworzący kod rejestrujące zdarzenie w modelem tradycyjnym - np akapit.onclick = wypisz; Od tej chwili możemy rejestrować zdarzenia dla elementów w następujący sposób: function init() { addevent(button1, "click", wylacz); addevent(button2, "click", wylacz); addevent(window, "load", init); Polecam obejrzeć filmik na stronie http://net.tutsplus.com/tutorials/javascript-ajax/javascript-fromnull-cross-browser-event-binding/, w którym bardzo fajnie jest omówiona nieco inna metoda obsługi wszystkich przeglądarek. Który model wybrać? Na pewno nie dziadka inline. Może na siłę udało by mi się wymyśleć jakiś szczególny przykład, kiedy musiałbyś zastosować ten model (przykład, który byłby przeznaczony dla leniwców). Osobiście zachęcam do stosowania nowoczesnego sposobu obsługi zdarzeń, chociaż jeżeli nie jesteś wprawny w pisaniu takiego kodu, to nic się nie stanie jak użyjesz onclick zamiast addeventlistener. Obie metody spełniają swoje zadanie. Jak zauważyliście, w przykładach w kursie wciąż stosuję model tradycyjny. Spowodowane jest to tym, że spora część zamieszczonych tutaj tekstów była pisana w różnych czasach, poza tym wydaje mi się, że pośredni podel jest bardziej przystępny do zrozumienia. Wykorzystanie słowa kluczowego this Javascript udostępnia słowo kluczowe this, które wskazuje na obiekt, który wywołał daną funkcję. Słowo to jest bardzo użyteczne w przypadku rejestrowania zdarzeń dla obiektów. Przykładowo chcielibyśmy zmienić kolor czcionki dowolnego obiektu, do którego przypiszemy zdarzenie onmouseover: function zmienkolor() { this.style.color = '#CC0000'; element.onmouseover = zmienkolor; inny_element.onmouseover = zmienkolor; Lub to samo z parametrami: function zmienkolor(jaki, element) { element.style.color = jaki; element.onmouseover = function() {
zmienkolor('#ccff33', this); inny_element.onmouseover = function() { zmienkolor('#ff9966', this) ; Wkraczamy w głąb zdarzenia Javascript udostępnia nam specjalne właściwości, dzięki którym możemy bardziej dokładnie badać każde zarejestrowane zdarzenie. Aby odczytać właściwości zdarzenia musimy posłużyć się pseudo parametrem, który będziemy przekazywać do deklarowanej funkcji (w naszych przykładach taki parametr nazwiemy e). element.onclick = function(e) { //...dzięki pseudo parametrowi "e" mamy dostęp do właściwości zdarzenia Niestety IE nieco inaczej podchodzi do tego. Aby odczytać właściwości zdarzenia w tej przeglądarce, musimy skorzystać z obiektu window.event. Nie jest to jednak problem. Wystarczy w zadeklarowanej funkcji sprawdzić, czy pseudo parametr e został przekazany, a jeżeli nie istnieje podstawić pod niego window.event. Załatwiamy to jedną linijką:? 1 if (!e) var e = window.event; 2 Od tej pory zaczynamy dłubać przy eventach. Możemy więc sprawdzić typ elementu, który wywołał dane zdarzenie. Możemy sprawdzić typ zdarzenia, możemy sprawdzić skąd dane zdarzenie się pojawiło itp. Możliwości jest multum. Typ zdarzenia Jakiego typu jest dane zdarzenie? Aby się tego dowiedzieć, wystarczy odczytać właściwość type każdego zdarzenia: function sprawdztyp(e) { if (!e) var e = window.event; return e.type; //... document.getelementbyid('jakis_guzik_na_stronie').onclick = function(e) { alert('typ zdarzenia: ' + sprawdztyp(e)); Który klawisz został naciśnięty Wartość naciśniętego klawisza jest przechowywana w właściwości keycode zdarzenia. Wystarczy ją odczytać i przesłać do metody String.fromCharCode() aby uzyskać naciśnięty klawisz.
function klawisz(e) { if (!e) var e = window.event; if (e.keycode) return e.keycode; document.getelementbyid('poletekstowe').onkeydown = function(e) { alert('naciśnięty klawisz to: ' + String.fromCharCode(klawisz(e)) ) Wpisz jakiś tekst: Wstrzymanie domyślnej akcji Większość elementów na stronie wykonuje domyślne akcje. Linki przenoszą w jakieś miejsca, formularz się wysyłają itp. Po podpięciu zdarzeń pod obiekt będą ono wywoływane na początku, jednak zaraz po nich wykonana zostanie domyślna czynność. Aby temu zapobiec skorzystamy z metody e.preventdefault(): element.addeventlistener('click',function (e) { alert('ten link nigdzie nie przeniesie.'); e.preventdefault();,false); Niektórych zdarzeń nie da się w ten sposób zatrzymać (np. load), o czym mówi nam właściwość e.cancelable Zatrzymanie nasłuchu innych zdarzeń Po odpaleniu zdarzenia, domyślnie przechodzi ono po obiektach od dołu hierarchii do góry - dążąc do dokumentu. Spójrzmy na poniższy przykład: <div id="jakis_div1"> <a id="link_w_div1" href="">kliknij mnie</a> </div> var div = document.getelementbyid('jakis_div1'); var a = document.getelementbyid('link_w_div1'); div.addeventlistener('click',function (e) { alert('kliknięto div');,false); a.addeventlistener('click',function (e) { alert('kliknięto link');,false);
Jeżeli teraz klikniemy na link zostanie wyświetlony komunikat "Kliknięto link". Równocześnie jednak zostanie wyświetlony komunikat dla div!. Dzieje się tak dlatego, że wszystkie zdarzenia zachowują się jak bąbelki. Po wywołaniu biegną one do góry hierarchii dokumentu. Nasze zdarzenie click dla linka zostaje odpalone, a następnie biegnie do początku hierarchii natrafiając po drodze na kolejny nasłuch wywołany przez div. Aby przerwać tą wędrówkę oraz kolejne nasłuchy, skorzystamy z metody e.stoppropagation(): var div = document.getelementbyid('jakis_div2'); var a = document.getelementbyid('link_w_div2'); div.addeventlistener('click',function (e) { alert('kliknięto div');,false); a.addeventlistener('click',function (e) { alert('kliknięto link'); e.preventdefault(); e.stoppropagation();,false); Od tej pory kliknięcie na link wywoła zdarzenie tylko dla tego linku.