Wprowadzenie

W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt event, a także interfejsy do rejestrowania zdarzeń dla węzłów DOM, uchwyty i obserwatorzy zdarzeń; przedstawione zostanie też kilka dłuższych przykładów pokazujących relacje między różnymi interfejsami.

Dostępny jest też doskonały diagram, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.

Interfejs DOM event

Interfejs DOM event reprezentowany jest przez obiekty event przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem event w funkcji obsługi zdarzenia.

function foo(e) {
  //funkcje obsługi zdarzeń - takie jak ta
  //otrzymują referencję do zdarzenia, jakie
  //obsługują (w tym przypadku "e")
  alert(e);
}
table_el.onclick = foo;

Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty event wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu event, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.

Zob. także Przykład 5: Propagowanie zdarzeń w rozdziale Przykłady użycia DOM, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.

Uchwyty zdarzeń

Oprócz opisanego tutaj obiektu event, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang. event listener ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale Elementy w DOM. Razem z uchwytami zdarzeń elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.

Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu event poprzez predefiniowany parametr o nazwie event. Jest to bardzo podobne do sposobu, w jaki działa this, ale tyczy się obiektów zdarzeń, a nie elementów.

<html>
<head>
<title>Przykład użycia parametru z obiektem event</title>

<script type="text/javascript">

function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(event)">
<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
</body>
</html>

Używanie predefiniowanego parametru event pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.

<html>
<head>
<title>Przykład użycia parametru z obiektem event wraz z dodatkowymi parametrami</title>

<script type="text/javascript">

var par2 = 'hello';
var par3 = 'world!';

function showCoords(evt, p2, p3){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
    + "p2: " + p2 + "\n"
    + "p3: " + p3 + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(event, par2, par3)">
<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
</body>
</html>

Własności

event.altKey
Zwraca wartość logiczną wskazującą, czy klawisz <alt> był wciśnięty podczas zdarzenia.
event.bubbles
Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.
event.button
Zwraca przycisk myszy.
event.cancelBubble
Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.
event.cancelable
Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.
event.charCode
Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia keypress.
event.clientX
Zwraca poziomą pozycję zdarzenia w obszarze klienta.
event.clientY
Zwraca pionową pozycję zdarzenia w obszarze klienta.
event.ctrlKey
Zwraca wartość logiczną wskazującą, czy klawisz <ctrl> był wciśnięty podczas zdarzenia.
event.currentTarget
Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.
event.detail
Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.
event.eventPhase
Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.
event.isChar
Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.
event.keyCode
Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.
event.layerX
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
event.layerY
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
event.metaKey
Zwraca wartość logiczną wskazującą, czy klawisz meta był wciśnięty podczas zdarzenia.
event.pageX
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
event.pageY
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
event.relatedTarget
Wskazuje na drugi cel zdarzenia.
event.screenX
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.
event.screenY
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.
event.shiftKey
Zwraca wartość logiczną wskazującą, czy klawisz <shift> był wciśnięty podczas zdarzenia.
event.target
Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.
event.timeStamp
Zwraca czas, kiedy o którym zdarzenie zostało utworzone.
event.type
Zwraca nazwę zdarzenia.
event.view
Wskazuje widok (AbstractView), w którym wygenerowane zostało zdarzenie.
event.which
Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.

Metody

event.initEvent
Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs DocumentEvent.
event.initKeyEvent
Inicjalizuje zdarzenie klawiatury. Gecko-specific.
event.initMouseEvent
Inicjalizuje zdarzenie myszy po jego utworzeniu.
event.initUIEvent
Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.
event.preventBubble
Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
event.preventCapture
Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
event.preventDefault
Anuluje zdarzenie (jeśli można je anulować).
event.stopPropagation
Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.

 

 

Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, jsx, Mgjbot, Ptak82, Jan Dudek, Takenbot
 Ostatnia aktualizacja: teoli,