Event

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.