aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/api/eventtarget
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
commitde5c456ebded0e038adbf23db34cc290c8829180 (patch)
tree2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/web/api/eventtarget
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html109
-rw-r--r--files/pl/web/api/eventtarget/dispatchevent/index.html43
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> &lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;Przykład zdarzenia DOM&lt;/title&gt;
+ &lt;style type="text/css"&gt;
+ #t { border: 1px solid red }
+ #t1 { background-color: pink; }
+ &lt;/style&gt;
+ &lt;script type="text/javascript"&gt;
+
+ // 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);
+ }
+
+ &lt;/script&gt;
+ &lt;/head&gt;
+ &lt;body onload="load();"&gt;
+ &lt;table id="t"&gt;
+ &lt;tr&gt;&lt;td id="t1"&gt;Jeden&lt;/td&gt;&lt;/tr&gt;
+ &lt;tr&gt;&lt;td id="t2"&gt;Dwa&lt;/td&gt;&lt;/tr&gt;
+ &lt;/table&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</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>&lt;table id="t" onclick="modifyText();"&gt;
+ ...
+&lt;/table&gt;
+</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>