diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
commit | de5c456ebded0e038adbf23db34cc290c8829180 (patch) | |
tree | 2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/web/api/eventtarget | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2 translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip |
unslug pl: move
Diffstat (limited to 'files/pl/web/api/eventtarget')
-rw-r--r-- | files/pl/web/api/eventtarget/addeventlistener/index.html | 109 | ||||
-rw-r--r-- | files/pl/web/api/eventtarget/dispatchevent/index.html | 43 |
2 files changed, 152 insertions, 0 deletions
diff --git a/files/pl/web/api/eventtarget/addeventlistener/index.html b/files/pl/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>addEventListener</code> pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>); +</pre> +<dl> + <dt> + type </dt> + <dd> + Łańcuch przedstawiający typ zdarzenia do nasłuchu.<span class="comment">Need a link here</span></dd> + <dt> + listener </dt> + <dd> + Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> lub pojedynczą <a href="/pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje" title="pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje">funkcją</a> JavaScript.</dd> + <dt> + useCapture </dt> + <dd> + Jeśli zostanie ustawione na <code>true</code>, <code>useCapture</code> wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu <code>type</code> będą przekazywane do naszego <code>listener</code>'a zanim zostaną wysłane do innych obiektów nasłuchujących (<code>EventTarget</code>) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (<code>listener</code>) ustawionego na przechwytywanie.</dd> +</dl> +<p>Dla uzyskania szczegółowego objaśnienia zobacz <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <html> + <head> + <title>Przykład zdarzenia DOM</title> + <style type="text/css"> + #t { border: 1px solid red } + #t1 { background-color: pink; } + </style> + <script type="text/javascript"> + + // Funkcja zmieniająca zawartość komórki tabeli t2 + function modifyText() { + var t2 = document.getElementById("t2"); + t2.firstChild.nodeValue = "Trzy"; + } + + // Funkcja dodająca obserwatora zdarzeń dla tabeli t + function load() { + var el = document.getElementById("t"); + el.addEventListener("click", modifyText, false); + } + + </script> + </head> + <body onload="load();"> + <table id="t"> + <tr><td id="t1">Jeden</td></tr> + <tr><td id="t2">Dwa</td></tr> + </table> + </body> + </html> +</pre> +<p>W powyższym przykładzie, funkcja <code>modifyText()</code> została zarejestrowana za pomocą <code>addEventListener()</code> do obsługi zdarzenia typu <code>click</code> na tabeli <code>t</code>. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję <code>modifyText()</code>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Po_co_u.C5.BCywa.C4.87_addEventListener.3F" name="Po_co_u.C5.BCywa.C4.87_addEventListener.3F">Po co używać <code>addEventListener</code>?</h4> +<p><code>addEventListener</code> daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:</p> +<ul> + <li>Pozwala na dodanie więcej niż jednego obiektu obsługującego zdarzenie. Jest to szczególnie użyteczne przy bibliotekach <a href="/pl/DHTML" title="pl/DHTML">DHTML</a> czy <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzeniach Mozilli</a>, które pracują, gdy uruchomione są inne biblioteki i rozszerzenia,</li> + <li>Daje większą kontrolę nad etapem aktywacji obiektu nasłuchującego <code>listener</code> (przechwytywanie vs. propagowanie),</li> + <li>Działa dla każdego elementu z DOM, a nie tylko dla elementów HTML.</li> +</ul> +<p>Alternatywne, starsze sposoby rejestracji zdarzeń są <a href="#Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">opisane poniżej</a>.</p> +<h4 id="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia" name="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia">Dodawanie nasłuchu podczas obsługi zdarzenia</h4> +<p>Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(<code>Event flow</code>), np. w fazie propagowania zdarzenia w górę drzewa DOM.</p> +<h4 id="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce" name="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce">Identyczne obiekty nasłuchujące</h4> +<p>Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (<code>EventTarget</code>) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji <code><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></code>, ponieważ są one usuwane automatycznie.</p> +<h4 id="Warto.C5.9B.C4.87_this" name="Warto.C5.9B.C4.87_this">Wartość <code>this</code></h4> +<p>Doczepianie akcji używając <code>addEventListener()</code> zmienia wartość <code>this</code>—zauważ, że wartość <code>this</code> ijest przekazywana funkcji przez zdarzenie.</p> +<p>W powyższym przykładzie, wartość <code>this</code> wewnątrz <code>modifyText()</code> gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:</p> +<pre><table id="t" onclick="modifyText();"> + ... +</table> +</pre> +<p>to wartość <code>this</code> wewnątrz funkcji <code>modifyText()</code> wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).</p> +<h4 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h4> +<p>W IE 8 i niższych należy użyć <code>attachEvent</code> zamiast standardowego <code>addEventListener</code>. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:</p> +<pre>if (el.addEventListener){ + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent){ + el.attachEvent('onclick', modifyText); +} +</pre> +<h4 id="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84" name="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">Starsze sposoby dołączania zdarzeń</h4> +<p><code>addEventListener()</code> zostało wprowadzone wraz ze specyfikacją DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:</p> +<pre>// Using a function reference—note lack of '()' +el.onclick = modifyText; + +// Używając deklaracji funkcji +element.onclick = function(){ + // ... logika funkcji ... + }; +</pre> +<p>Ta metoda zastępuje istniejącą obsługę zdarzenia <code>onclick</code> na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak <code>onblur</code>, <code>onkeypress</code>, i tak dalej.</p> +<p>Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości <code>addEventListener()</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: addEventListener</a></p> +<p>{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}</p> diff --git a/files/pl/web/api/eventtarget/dispatchevent/index.html b/files/pl/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wywołuje zdarzenie w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>bool</em> = <em>element</em>.dispatchEvent(<em>event</em>) +</pre> + +<ul> + <li><code>event</code> to <a href="pl/DOM/event">obiekt zdarzenia</a>, które ma zostać wywołane.</li> + <li>Jeśli któraś z funkcji obsługujących to zdarzenie wywoła <a href="pl/DOM/event.preventDefault">preventDefault</a>, zwracana wartość to <code>false</code>. W przeciwnym przypadku zwracane jest <code>true</code>.</li> +</ul> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jak pokazuje powyższy przykład, <code>dispatchEvent</code> to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.</p> + +<p>Zdarzenie może zostać utworzone przy użyciu metody <a href="pl/DOM/document.createEvent">document.createEvent</a> i zainicjowane za pomocą <a href="pl/DOM/event.initEvent">initEvent</a> lub innej, bardziej wyspecjalizowanej metody, jak <a href="pl/DOM/event.initMouseEvent">initMouseEvent</a> albo <a href="pl/DOM/event.initUIEvent">initUIEvent</a>.</p> + +<p>Zobacz też dokumentację <a href="pl/DOM/event">obiektu event</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}</p> |