Zdarzenia - lomilowka.pl

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.