1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: Event
slug: Web/API/Event
tags:
- DOM
- Dokumentacja_Gecko_DOM
- Gecko
- Wszystkie_kategorie
translation_of: Web/API/Event
---
<p>{{ ApiRef() }}</p>
<h3 id="Wprowadzenie" name="Wprowadzenie">Wprowadzenie</h3>
<p>W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt <code>event</code>, 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.</p>
<p>Dostępny jest też doskonały <a class="external" href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow">diagram</a>, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.</p>
<h4 id="Interfejs_DOM_event" name="Interfejs_DOM_event">Interfejs DOM event</h4>
<p>Interfejs DOM <code>event</code> reprezentowany jest przez obiekty <code>event</code> przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem <code>event</code> w funkcji obsługi zdarzenia.</p>
<pre>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;
</pre>
<p>Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty <code>event</code> wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu <code>event</code>, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.</p>
<p>Zob. także <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykład 5: Propagowanie zdarzeń</a> w rozdziale <a href="pl/Dokumentacja_Gecko_DOM/Przyk%c5%82ady_u%c5%bcycia_DOM">Przykłady użycia DOM</a>, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.</p>
<h4 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h4>
<p>Oprócz opisanego tutaj obiektu <code>event</code>, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang.<em>event listener</em> ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale <a href="pl/DOM/element">Elementy w DOM</a>. Razem z <a href="pl/DOM/element#Uchwyty_zdarze.C5.84">uchwytami zdarzeń</a> elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.</p>
<p>Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu <code>event</code> poprzez predefiniowany parametr o nazwie <code>event</code>. Jest to bardzo podobne do sposobu, w jaki działa <code>this</code>, ale tyczy się obiektów zdarzeń, a nie elementów.</p>
<pre><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>
</pre>
<p>Używanie predefiniowanego parametru <code>event</code> pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.</p>
<pre><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>
</pre>
<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3>
<dl>
<dt><a href="pl/DOM/event.altKey">event.altKey</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><alt></code> był wciśnięty podczas zdarzenia.</dd>
<dt><a href="pl/DOM/event.bubbles">event.bubbles</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.</dd>
<dt><a href="pl/DOM/event.button">event.button</a></dt>
<dd>Zwraca przycisk myszy.</dd>
<dt><a href="pl/DOM/event.cancelBubble">event.cancelBubble</a></dt>
<dd>{{ Deprecated_inline() }} Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.</dd>
<dt><a href="pl/DOM/event.cancelable">event.cancelable</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.</dd>
<dt><a href="pl/DOM/event.charCode">event.charCode</a></dt>
<dd>Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia <a href="pl/DOM/element.onkeypress">keypress</a>.</dd>
<dt><a href="pl/DOM/event.clientX">event.clientX</a></dt>
<dd>Zwraca poziomą pozycję zdarzenia w obszarze klienta.</dd>
<dt><a href="pl/DOM/event.clientY">event.clientY</a></dt>
<dd>Zwraca pionową pozycję zdarzenia w obszarze klienta.</dd>
<dt><a href="pl/DOM/event.ctrlKey">event.ctrlKey</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><ctrl></code> był wciśnięty podczas zdarzenia.</dd>
<dt><a href="pl/DOM/event.currentTarget">event.currentTarget</a></dt>
<dd>Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.</dd>
<dt><a href="pl/DOM/event.detail">event.detail</a></dt>
<dd>Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.</dd>
<dt><a href="pl/DOM/event.eventPhase">event.eventPhase</a></dt>
<dd>Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.</dd>
<dt><a href="pl/DOM/event.isChar">event.isChar</a></dt>
<dd>Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.</dd>
<dt><a href="pl/DOM/event.keyCode">event.keyCode</a></dt>
<dd>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ą.</dd>
<dt><a href="pl/DOM/event.layerX">event.layerX</a></dt>
<dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd>
<dt><a href="pl/DOM/event.layerY">event.layerY</a></dt>
<dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.</dd>
<dt><a href="pl/DOM/event.metaKey">event.metaKey</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy klawisz <code>meta</code> był wciśnięty podczas zdarzenia.</dd>
<dt><a href="pl/DOM/event.pageX">event.pageX</a></dt>
<dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd>
<dt><a href="pl/DOM/event.pageY">event.pageY</a></dt>
<dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.</dd>
<dt><a href="pl/DOM/event.relatedTarget">event.relatedTarget</a></dt>
<dd>Wskazuje na drugi cel zdarzenia.</dd>
<dt><a href="pl/DOM/event.screenX">event.screenX</a></dt>
<dd>Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.</dd>
<dt><a href="pl/DOM/event.screenY">event.screenY</a></dt>
<dd>Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.</dd>
<dt><a href="pl/DOM/event.shiftKey">event.shiftKey</a></dt>
<dd>Zwraca wartość logiczną wskazującą, czy klawisz <code><shift></code> był wciśnięty podczas zdarzenia.</dd>
<dt><a href="pl/DOM/event.target">event.target</a></dt>
<dd>Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.</dd>
<dt><a href="pl/DOM/event.timeStamp">event.timeStamp</a></dt>
<dd>Zwraca czas, kiedy o którym zdarzenie zostało utworzone.</dd>
<dt><a href="pl/DOM/event.type">event.type</a></dt>
<dd>Zwraca nazwę zdarzenia.</dd>
<dt><a href="pl/DOM/event.view">event.view</a></dt>
<dd>Wskazuje widok (<code>AbstractView</code>), w którym wygenerowane zostało zdarzenie.</dd>
<dt><a href="pl/DOM/event.which">event.which</a></dt>
<dd>Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.</dd>
</dl>
<h3 id="Metody" name="Metody">Metody</h3>
<dl>
<dt><a href="pl/DOM/event.initEvent">event.initEvent</a></dt>
<dd>Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs <code>DocumentEvent</code>.</dd>
<dt><a href="pl/DOM/event.initKeyEvent">event.initKeyEvent</a></dt>
<dd>Inicjalizuje zdarzenie klawiatury. Gecko-specific.</dd>
<dt><a href="pl/DOM/event.initMouseEvent">event.initMouseEvent</a></dt>
<dd>Inicjalizuje zdarzenie myszy po jego utworzeniu.</dd>
<dt><a href="pl/DOM/event.initUIEvent">event.initUIEvent</a></dt>
<dd>Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.</dd>
<dt><a href="pl/DOM/event.preventBubble">event.preventBubble</a></dt>
<dd>{{ Obsolete_inline() }} Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd>
<dt><a href="pl/DOM/event.preventCapture">event.preventCapture</a></dt>
<dd>{{ Obsolete_inline() }} Ta metoda jest przestarzała ze względu na standard <a href="pl/DOM/event.stopPropagation">stopPropagation</a> i jest <a href="pl/Zmiany_w_Gecko_1.9_wp%c5%82ywaj%c4%85ce_na_wy%c5%9bwietlanie_stron">usunięta w Gecko 1.9</a>.</dd>
<dt><a href="pl/DOM/event.preventDefault">event.preventDefault</a></dt>
<dd>Anuluje zdarzenie (jeśli można je anulować).</dd>
<dt><a href="pl/DOM/event.stopPropagation">event.stopPropagation</a></dt>
<dd>Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.</dd>
</dl>
<div class="noinclude"></div>
<p>{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event" } ) }}</p>
|
