Blog webdeveloperski Patryk yarpo Jar

Wywoływanie zdarzeń z poziomu JavaScript

Autor wiadomości Styczeń 12, 2012

Obsługa zdarzeń to jeden z częściej wykorzystywanych mechanizmów na nowoczesnych stronach WWW. Czasem jednak chcielibyśmy nie tyle przypisać pewne zdarzenie, co z poziomu JavaScript je wywołać. W tym wpisie pokażę jak to zrobić wykorzystując stare i nowe sposoby, zarówno w przeglądarkach, jak i w IE (nie wszystkie przykłady będą działać w IE. Opis, co zrobić, aby załatać tę niespójność znajdziesz na końcu wpisu).

Old school

Najpierw coś prostego. Powiedzmy, że chcemy wywołać funkcję obsługi zdarzenia `click' węzła DOM o id "click-example":

document.getElementById("click-example").click();

demo online

Powyższy kod jest przykładem wywołania metody `click' węzła DOM, która wywołuje funkcję obsługi zdarzenia `click'. Inne tego typu metody tyo `focus', `submit', `blur' itp. (nazwy metod tworzone od nazw atrybutów HTML "onclick", "obblur" itd.)

Należy jednak pamiętać, że w modelu zdarzeń zgodnym z DOM[1][2] występuje faza przechwytywania (ang. capture) - kiedy zdarzenie jest przekazywane z najbardziej ogólnego obiektu DOM dotkniętego zdarzeniem do celu zdarzenia (ang. target, zobacz: event.target), a także faza wznoszenia (ang. bubble) - od obiektu bezpośrednio dotkniętego zdarzeniem (event.target) do najbardziej ogólnego obiektu DOM. Ciekawe grafiki poglądowe można na ten temat można znaleźć w JavaScript na poważnie, strony 48-52.

Co się zatem stanie, kiedy węzeł, na którym wywołujemy zdarzenie będzie miał przypisane funkcje obsługi zdarzeń na "wszystkie okazje" (przechwytywanie, wznoszenie oraz za pomocą atrybutu `onclick')?

var node = document.getElementById('click-example'); //.click();

node.addEventListener('click', function() {
    alert("click-example - przechwytywanie");
}, true);

node.addEventListener('click', function() {
    alert("click-example - wznoszenie");
}, false);

node.click();

demo online

Jak widać, na powyższym przykładzie zostaną wywołane kolejno:

  1. atrybut
  2. przechwytywanie
  3. wznoszenie

Pójdźmy krok dalej, co będzie jeśli prócz przypisania zdarzenia przez atrybut przypiszemy także przez obiekt `node' w kodzie JS?

// to co poprzednio
node.onclick = function() { alert("przypisane do obiektu"); }
node.click();

demo online

Kolejność będzie taka sama jak w poprzednim przykładzie z tym, że funkcja przypisana do obiektu nadpisze funkcję przypisaną za pomocą atrybuty HTML.

DOM Level 2 Events: createEvent

Pokazana wyżej technika nie jest najnowsza. Jej plusem jest to, że działa. Nie pozwala jednak na określenie bardzo przydatnych informacji, jak choćby w które miejsce danego obiektu ma zostać wykonane zdarzenie kliknięcia, czy ma być ono w fazie przechwytywania czy wnoszenia, czy może być anulowane itp.

Może zacznę od prostego przykładu:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
document.getElementById("mouse-target").dispatchEvent(evt);

demo online

Metoda `Event.initMouseEvent' posiada aż 15 parametrów. Parametry te w pełni opisują wywoływane zdarzenie. Wliczając w to miejsce rzekomego kliknięcia, cel zdarzenia itp.

event.initMouseEvent(type, canBubble, cancelable,
    view, detail, screenX, screenY, clientX, clientY, ctrlKey,
    altKey, shiftKey, metaKey, button, relatedTarget);

Pełny opis przekazywanych parametrów znaleźć można na stronie MDN:

Przeczytaj więcej:

Prócz przedstawionego tu sposobu na wywoływanie zdarzeń kliknięcia istnieją także specjalne metody do wywoływania innych zdarzeń, m. in:

Co na to nIE przeglądarka?

Internet Explorer tradycyjnie posiada własne mechanizmy, choć powyższe przykłady działały w IE 9 (z tego, co zdążyłem poczytać w dokumentacji posiada wyrównaną obsługę zdarzeń opartą o metodę `document.createEvent'.), to we wcześniejszych pewnie nie (z pewnością w IE 6 nie, nie wiem jak w 7 i 8).

Stąd warto zabezpieczyć się i dla IE wykorzystywać specjalną metodą `fireEvent':

document.getElementById("mouse-target").fireEvent("onclick");

demo online

Metoda ta przyjmuje jeden lub dwa parametry:

  1. (string) wywoływane zdarzenie
  2. (obiekt) obiekt zdarzenia

Drugi parametr jest opcjonalny. Do stworzenia takiego obiektu wykorzystuje się metodę `createEventObject'

Przeczytaj więcej:

Pamiętaj, że dobrym zwyczajem jest sprawdzanie, czy w danej przeglądarce istnieje jakaś funkcja, zamiast sprawdzania typu przeglądarki, np.:

if (document.getElementsByClassName)
{
    // używamy getElementsByClassName
}
else
{
    // używamy czegoś innego
}

Powodzenia 🙂

Komentarze (2) Trackbacks (0)
  1. witam szukam rozwiązania które by pozwoliło mi kasować historię FF za pomocą skrótów klawiszowych. Podobnie jak jest w programie klik-acz myszy. Czy jest to możliwe aby ciąg skrótów klawiszy można wpisać na stronę i róćh myszki to uruchamiał

  2. Mysle, ze musialbys raczej zainteresowac sie tworzeniem wtyczek do FF. Nie sadze, aby istnial sposob na dobranie sie z poziomu JS strony internetowej do historii przegladarki.


Leave a comment

 

Brak trackbacków.