diff options
Diffstat (limited to 'files/pl/web/api/event/index.html')
| -rw-r--r-- | files/pl/web/api/event/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/pl/web/api/event/index.html b/files/pl/web/api/event/index.html new file mode 100644 index 0000000000..8b5dd22105 --- /dev/null +++ b/files/pl/web/api/event/index.html @@ -0,0 +1,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> |