DOM:event
z Mozilla Developer Center, polskiego centrum programistów Mozilli.
Spis treści |
[edytuj] 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.
[edytuj] 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.
[edytuj] 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>
[edytuj] 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
- Wycofywany 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
metabył 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.
[edytuj] 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
- Przestarzały 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
- Przestarzały 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.