Dziudek's jogger

Obiekt Event w MooTools 1.2 posiada kilkanaście nowych właściwości oraz trzy metody. Te metody będą nam przydatne w wypadku operowania na elementach dokumentu oraz w połączeniu z poznanymi w poprzedniej części kursu możliwościami obietu Function.

Gdy chcemy uniknąć propagacji zdarzeń

Metoda stopPropagation jest przydatna na przykład w sytuacji gdy element nadrzędny posiada przypisane zdarzenie, dla przykładu onclick - wtedy po dodaniu tego zdarzenia do elementu potomnego kliknięcie w tenże element powoduje wywołanie dwóch zdarzeń - elementu potomnego i jego rodzica. Aby tego uniknąć stosujemy metodę stopPropagation:

obiektKlasyEvent.stopPropagation();

Powyższy kod umieszczony w funkcji przypisanej do obserwatora zdarzeń spowoduje, że żadne zdarzenia z elementów nadrzędnych nie będą wykonywane - wykona się jedynie zdarzenie wywoływane.

Unikamy domyślnej operacji

Druga istotna metoda to preventDefault:

obiektKlasyEvent.preventDefault();

Metoda ta jest niezwykle przydatna w wypadku zdarzeń onclick takich elementów jak linki czy chociażby przycisk submit w formularzu. Dlaczego ? Domyślnie po kliknięciu w link niezależnie od tego co dalej zrobimy zostaniemy przeniesieni do adresu wskazywanego przez atrybut href linka. Metoda preventDefault blokuje tę standardową akcję. Warto zauważyć, że w wypadku przycisku submit w formularzu jest to nieoceniona pomoc - gdy mamy interfejs który pracuje zarówno z jak i bez JS - możemy dzięki temu mieć pewność, że użytkownicy korzystający z JS zostaną od razu poinformowaniu o błędach w formularzy, a osoby z wyłączonym JS ujrzą stosowny komunikat po wysłaniu formularza.

Można też zrobić to naraz

Jeżeli musimy naraz powstrzymać propagowanie zdarzeń i akcję domyślną możemy skorzystać z metody stop:

obiektKlasyEvent.stop();

Powyższy zapis jest równoznaczny zapisowi:

obiektKlasyEvent.stopPropagation();
obiektKlasyEvent.preventDefault();

czyli krótko mówiąc - takie dwa w jednym.

Właściwości klasy Event

Omówię teraz właściwości obiektów klasy Event:

Poniższe właściwości przyjmują wartość true, jeżeli użytkownik naciśnie dany klawisz:

• Event.shift - klawisz Shift,
• Event.control - klawisz Ctrl,
• Event.alt - klawisz Alt,
• Event.meta - metaklawisz.

Obiekt Event ma także właściwość związaną z rolką myszki:

• Event.wheel - właściwość ta zwraca nam ilość obrotów rolki (wartości ujemne przy przewijaniu w dół i wartości dodanie przy przewijaniu w górę - zawsze są to liczby całkowite),

Dzięki obiektowi klasy Event możemy także odczytać dokładniejsze informacje o wciskanych klawiszach:

• Event.code - kod wciśniętego klawisza,
• Event.key - wartość wciskanego klawisza (małe litery). Dodatkowo klawisze mogą mieć wartości: 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'tab', 'delete', 'esc'.

Dzięki poniższym właściwościom możemy odczytać dokładną pozycję kursora myszki:

• Event.page.x - współrzędna x kursora myszki względem całego okna.
• Event.page.y - współrzędna y kursora myszki względem całego okna.
• Event.client.x - współrzędna x kursora myszki względem widocznego fragmentu okna.
• Event.client.y - współrzędna y kursora myszki względem widocznego fragmentu okna.

Dodatkowo właściwość Event.rightClick informuje nas czy został naciśnięty prawy klawisz myszki.

Na koniec dwie właściwości związane z elementem, którego dotyczy zdarzenie:

• target - ta właściwość zwraca uchwyt do elementu dla którego zostało wykonane zdarzenie.
• relatedTarget - dzięki tej właściwości możemy uzyskać uchwyt do elementu nad jakim znalazł się kursor po opuszczeniu obszaru elementu z przypisanym zdarzeniem mouseout.

Ja osobiście bardzo upodobałem sobie właściwość target - dzięki niej mogę drastycznie ograniczyć ilość event listenerów - zamiast tworzyć kilkanaście zdarzeń, tworzę jedno i na podstawie wartości tej właściwości wykonuję odpowiednią operację - jest to nieoceniona pomoc zwłaszcza w wypadku interfejsów opartych na AJAX, gdzie pewne elementy mogą być ładowane dynamicznie - dzięki stosowaniu właściwości target nie trzeba tworzyć kilkunastu event listenerów przy każdym wczytaniu danych. Z pewnością zaprezentuję tą użyteczną metodę w przykładach omawiających manipulowanie elementami dokumentu - póki co ciągle studiujemy teoretyczne podstawy MooTools.

Pozostał nam jeszcze obiekt Event.keys - zawiera on kody wybranych klawiszy. Jeżeli chcemy do wartości zwracanych przez właściwość key obiektu Event dodać własne klawisze z własnymi nazwami stosujemy zapis:

Event.keys.nazwaKlawisza = kodKlawisza;

Dzięki temu możemy potem stosować zapis postaci:

if(event.key == "nazwaKlawisza") { ... }

Powiązanie z metodą bindWithEvent

Na sam koniec opiszę wspomniane w poprzedniej części kursu powiązanie pomiędzy metodą bindWithEvent, a obiektem Event. Będzie to jednocześnie podsumowanie dla poznanych metod tego obiektu.

Musimy pamiętać, że funkcja, która korzysta z metody bindWithEvent musi jako pierwszy argument pobierać uchwyt do zdarzenia:

var obslugaZdarzenia = function(event){ ... }

Wtedy jeżeli wykonamy:

obslugaZdarzenia.bindWithEvent();

To w ciele funkcji obslugaZdarzenia zmienna event będzie służyła jako uchwyt do zdarzenia.

Oczywiście musimy pamiętać, że:

obslugaZdarzenia.bindWithEvent();

musi zostać przypisane jako funkcja obsługi zdarzenia. Na razie możemy zrobić to tak:

uchwytDoElement.addEventListener("click", obslugaZdarzenia.bindWithEvent() ,false);

ale z czasem wykorzystam do tego funkcję addEvent, która poznamy nieco później.

W każdym razie mając już w zmiennej event uchwyt do zdarzenia, możemy na jego podstawie utworzyć obiekt Event:

var obslugaZdarzenia = function(event){
	var zdarzenie = new Event(event);
}

A potem już możemy odwoływać się do wszystkich metod i właściwości tegoż obiektu:

var obslugaZdarzenia = function(event){
	var zdarzenie = new Event(event);
	zdarzenie.stop();
}

Podsumowanie

Teorię już znamy - na praktykę przyjdzie czas podczas omawiania pliku Element.Event i nie tylko.

W następnej części kursu zajmiemy się ciągami znaków (obiekt String).