From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../api/eventtarget/addeventlistener/index.html | 109 +++++++++++++++++++++ .../web/api/eventtarget/dispatchevent/index.html | 43 ++++++++ 2 files changed, 152 insertions(+) create mode 100644 files/pl/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/pl/web/api/eventtarget/dispatchevent/index.html (limited to 'files/pl/web/api/eventtarget') 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 +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.

+

Składnia

+
target.addEventListener(type, listener, useCapture);
+
+
+
+ type 
+
+ Łańcuch przedstawiający typ zdarzenia do nasłuchu.Need a link here
+
+ listener 
+
+ Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.
+
+ useCapture 
+
+ Jeśli zostanie ustawione na true, useCapture wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu type będą przekazywane do naszego listener'a zanim zostaną wysłane do innych obiektów nasłuchujących (EventTarget) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.
+
+

Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.

+

Przykład

+
 <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>
+
+

W powyższym przykładzie, funkcja modifyText() została zarejestrowana za pomocą addEventListener() do obsługi zdarzenia typu click na tabeli t. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję modifyText().

+

Uwagi

+

Po co używać addEventListener?

+

addEventListener daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:

+ +

Alternatywne, starsze sposoby rejestracji zdarzeń są opisane poniżej.

+

Dodawanie nasłuchu podczas obsługi zdarzenia

+

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ń(Event flow), np. w fazie propagowania zdarzenia w górę drzewa DOM.

+

Identyczne obiekty nasłuchujące

+

Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (EventTarget) 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 removeEventListener, ponieważ są one usuwane automatycznie.

+

Wartość this

+

Doczepianie akcji używając addEventListener() zmienia wartość this—zauważ, że wartość this ijest przekazywana funkcji przez zdarzenie.

+

W powyższym przykładzie, wartość this wewnątrz modifyText() 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:

+
<table id="t" onclick="modifyText();">
+  ...
+</table>
+
+

to wartość this wewnątrz funkcji modifyText() wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).

+

Internet Explorer

+

W IE 8 i niższych należy użyć attachEvent zamiast standardowego addEventListener. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:

+
if (el.addEventListener){
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent){
+  el.attachEvent('onclick', modifyText);
+}
+
+

Starsze sposoby dołączania zdarzeń

+

addEventListener() zostało wprowadzone wraz ze specyfikacją DOM 2 Events. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:

+
// Using a function reference—note lack of '()'
+el.onclick = modifyText;
+
+// Używając deklaracji funkcji
+element.onclick = function(){
+                    // ... logika funkcji ...
+                  };
+
+

Ta metoda zastępuje istniejącą obsługę zdarzenia onclick na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak onblur, onkeypress, i tak dalej.

+

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  addEventListener().

+

Specyfikacja

+

DOM Level 2 Events: addEventListener

+

{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}

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 +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wywołuje zdarzenie w bieżącym elemencie.

+ +

Składnia

+ +
bool = element.dispatchEvent(event)
+
+ + + +

Uwagi

+ +

Jak pokazuje powyższy przykład, dispatchEvent 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.

+ +

Zdarzenie może zostać utworzone przy użyciu metody document.createEvent i zainicjowane za pomocą initEvent lub innej, bardziej wyspecjalizowanej metody, jak initMouseEvent albo initUIEvent.

+ +

Zobacz też dokumentację obiektu event.

+ +

Specyfikacja

+ +

DOM Level 2 Events: dispatchEvent

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}

-- cgit v1.2.3-54-g00ecf