From 0ccebc7eb352eda4d26d0b876fea36f24f482eec Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 17 Apr 2021 00:11:36 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 1 + files/de/_wikihistory.json | 12 +- .../creating_and_triggering_events/index.html | 136 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 135 ------------------- files/es/_redirects.txt | 4 +- files/es/_wikihistory.json | 32 ++--- .../orphaned/web/api/parentnode/append/index.html | 135 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 145 ++++++++++++++++++++ files/es/web/api/parentnode/append/index.html | 134 ------------------- .../creating_and_triggering_events/index.html | 145 -------------------- files/fr/_redirects.txt | 5 +- files/fr/_wikihistory.json | 52 ++++---- .../orphaned/web/api/parentnode/append/index.html | 138 +++++++++++++++++++ .../orphaned/web/api/parentnode/prepend/index.html | 138 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 97 ++++++++++++++ files/fr/web/api/parentnode/append/index.html | 137 ------------------- files/fr/web/api/parentnode/prepend/index.html | 137 ------------------- .../creating_and_triggering_events/index.html | 97 -------------- files/ja/_redirects.txt | 4 + files/ja/_wikihistory.json | 68 +++++----- .../orphaned/web/api/parentnode/append/index.html | 145 ++++++++++++++++++++ .../orphaned/web/api/parentnode/prepend/index.html | 145 ++++++++++++++++++++ files/ja/orphaned/web/events/index/index.html | 10 ++ .../creating_and_triggering_events/index.html | 142 ++++++++++++++++++++ files/ja/web/api/parentnode/append/index.html | 144 -------------------- files/ja/web/api/parentnode/prepend/index.html | 144 -------------------- files/ja/web/events/index/index.html | 9 -- .../creating_and_triggering_events/index.html | 141 -------------------- files/ko/_redirects.txt | 3 + files/ko/_wikihistory.json | 36 ++--- .../orphaned/web/api/parentnode/append/index.html | 135 +++++++++++++++++++ .../orphaned/web/api/parentnode/prepend/index.html | 134 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 141 ++++++++++++++++++++ files/ko/web/api/parentnode/append/index.html | 134 ------------------- files/ko/web/api/parentnode/prepend/index.html | 133 ------------------- .../creating_and_triggering_events/index.html | 140 -------------------- files/pl/_redirects.txt | 5 +- files/pl/_wikihistory.json | 18 +-- .../creating_and_triggering_events/index.html | 35 +++++ .../creating_and_triggering_events/index.html | 35 ----- files/pt-br/_redirects.txt | 3 +- files/pt-br/_wikihistory.json | 12 +- .../creating_and_triggering_events/index.html | 146 ++++++++++++++++++++ .../creating_and_triggering_events/index.html | 146 -------------------- files/ru/_redirects.txt | 5 +- files/ru/_wikihistory.json | 56 ++++---- .../orphaned/web/api/parentnode/append/index.html | 135 +++++++++++++++++++ .../orphaned/web/api/parentnode/prepend/index.html | 134 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 93 +++++++++++++ files/ru/web/api/parentnode/append/index.html | 134 ------------------- files/ru/web/api/parentnode/prepend/index.html | 133 ------------------- .../creating_and_triggering_events/index.html | 93 ------------- files/zh-cn/_redirects.txt | 3 + files/zh-cn/_wikihistory.json | 70 +++++----- .../orphaned/web/api/parentnode/append/index.html | 147 +++++++++++++++++++++ .../orphaned/web/api/parentnode/prepend/index.html | 135 +++++++++++++++++++ .../creating_and_triggering_events/index.html | 137 +++++++++++++++++++ files/zh-cn/web/api/parentnode/append/index.html | 146 -------------------- files/zh-cn/web/api/parentnode/prepend/index.html | 134 ------------------- .../creating_and_triggering_events/index.html | 136 ------------------- files/zh-tw/_redirects.txt | 1 + files/zh-tw/_wikihistory.json | 14 +- .../creating_and_triggering_events/index.html | 145 ++++++++++++++++++++ .../creating_and_triggering_events/index.html | 144 -------------------- 64 files changed, 2961 insertions(+), 2922 deletions(-) create mode 100644 files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/de/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/es/orphaned/web/api/parentnode/append/index.html create mode 100644 files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/es/web/api/parentnode/append/index.html delete mode 100644 files/es/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/fr/orphaned/web/api/parentnode/append/index.html create mode 100644 files/fr/orphaned/web/api/parentnode/prepend/index.html create mode 100644 files/fr/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/fr/web/api/parentnode/append/index.html delete mode 100644 files/fr/web/api/parentnode/prepend/index.html delete mode 100644 files/fr/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ja/orphaned/web/api/parentnode/append/index.html create mode 100644 files/ja/orphaned/web/api/parentnode/prepend/index.html create mode 100644 files/ja/orphaned/web/events/index/index.html create mode 100644 files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ja/web/api/parentnode/append/index.html delete mode 100644 files/ja/web/api/parentnode/prepend/index.html delete mode 100644 files/ja/web/events/index/index.html delete mode 100644 files/ja/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ko/orphaned/web/api/parentnode/append/index.html create mode 100644 files/ko/orphaned/web/api/parentnode/prepend/index.html create mode 100644 files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ko/web/api/parentnode/append/index.html delete mode 100644 files/ko/web/api/parentnode/prepend/index.html delete mode 100644 files/ko/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/pl/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pl/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/pt-br/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ru/orphaned/web/api/parentnode/append/index.html create mode 100644 files/ru/orphaned/web/api/parentnode/prepend/index.html create mode 100644 files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/ru/web/api/parentnode/append/index.html delete mode 100644 files/ru/web/api/parentnode/prepend/index.html delete mode 100644 files/ru/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/zh-cn/orphaned/web/api/parentnode/append/index.html create mode 100644 files/zh-cn/orphaned/web/api/parentnode/prepend/index.html create mode 100644 files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/zh-cn/web/api/parentnode/append/index.html delete mode 100644 files/zh-cn/web/api/parentnode/prepend/index.html delete mode 100644 files/zh-cn/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/zh-tw/orphaned/web/guide/events/creating_and_triggering_events/index.html delete mode 100644 files/zh-tw/web/guide/events/creating_and_triggering_events/index.html (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 09b93b3899..ce6c7ba2e9 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -652,6 +652,7 @@ /de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /de/docs/Web/Guide/DOM /de/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 /de/docs/Web/Guide/DOM/Manipulating_the_browser_history /de/docs/Web/API/History_API +/de/docs/Web/Guide/Events/Creating_and_triggering_events /de/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /de/docs/Web/Guide/HTML /de/docs/Learn/HTML /de/docs/Web/Guide/HTML/Canvas_Tutorial /de/docs/Web/API/Canvas_API/Tutorial /de/docs/Web/Guide/HTML/Canvas_Tutorial/Advanced_animations /de/docs/Web/API/Canvas_API/Tutorial/Advanced_animations diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 4da1fe1867..2f6f7a2997 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -6763,12 +6763,6 @@ "gportioli" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-18T20:36:47.550Z", - "contributors": [ - "td8" - ] - }, "Web/Guide/Graphics": { "modified": "2019-03-23T23:05:58.536Z", "contributors": [ @@ -14837,5 +14831,11 @@ "fscholz", "Mrueegg" ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-18T20:36:47.550Z", + "contributors": [ + "td8" + ] } } \ No newline at end of file diff --git a/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..82ea9c1b7a --- /dev/null +++ b/files/de/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,136 @@ +--- +title: Erstellen und Auslösen von Ereignissen +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

Dieser Artikel zeigt, wie man DOM-Ereignisse erstellt und versendet. Solche Ereignisse werden allgemein als synthetische Ereignisse bezeichnet, im Gegensatz zu den Ereignissen, die vom Browser selbst ausgelöst werden.

+ +

Erstellen von benutzerdefinierten Ereignissen

+ +

Ereignisse können mit dem Event-Konstruktor wie folgt erstellt werden:

+ +
var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().

+ +

Dieser Konstruktor wird in den meisten modernen Browsern unterstützt (mit Ausnahme des Internet Explorers). Für einen ausführlicheren Ansatz (der mit dem Internet Explorer funktioniert) siehe den altmodischen Weg unten.

+ +

Hinzufügen von benutzerdefinierten Daten - CustomEvent()

+ +

Um weitere Daten zum Ereignisobjekt hinzuzufügen, existiert die CustomEvent-Schnittstelle und die Detaileigenschaft kann zur Übergabe von benutzerdefinierten Daten verwendet werden.
+ Beispielsweise könnte das Ereignis wie folgt angelegt werden:

+ +
var event = new CustomEvent('build', { detail: elem.dataset.time });
+ +

Auf diese Weise können Sie dann auf die zusätzlichen Daten im Event-Listener zugreifen:

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

Auf die altmodische Art und Weise

+ +

Der ältere Ansatz zur Erstellung von Ereignissen verwendet APIs, die von Java inspiriert sind. Im Folgenden ist ein Beispiel dargestellt:

+ +
// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+elem.addEventListener('build', function (e) {
+  // e.target matches elem
+}, false);
+
+// target can be any Element or other EventTarget.
+elem.dispatchEvent(event);
+
+
+ +

Ereignisbubbling

+ +

Es ist oft wünschenswert, ein Ereignis aus einem untergeordneten Element auszulösen und von einem Vorfahren abfangen zu lassen; optional mit Daten:

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+
+ +

Dynamisches Erstellen und Versenden von Ereignissen

+ +

Elemente können auf Ereignisse warten, die noch nicht erstellt wurden:

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+
+ +

Auslösen von eingebauten Ereignissen

+ +

Dieses Beispiel demonstriert die Simulation eines Klicks (d.h. das programmgesteuerte Erzeugen eines Klickereignisses) auf einem Kontrollkästchen mit Hilfe von DOM-Methoden.

+ +

Sehen Sie sich das Beispiel in Aktion an.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+ +

Siehe auch

+ + diff --git a/files/de/web/guide/events/creating_and_triggering_events/index.html b/files/de/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 06a765d3c0..0000000000 --- a/files/de/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Erstellen und Auslösen von Ereignissen -slug: Web/Guide/Events/Creating_and_triggering_events -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

Dieser Artikel zeigt, wie man DOM-Ereignisse erstellt und versendet. Solche Ereignisse werden allgemein als synthetische Ereignisse bezeichnet, im Gegensatz zu den Ereignissen, die vom Browser selbst ausgelöst werden.

- -

Erstellen von benutzerdefinierten Ereignissen

- -

Ereignisse können mit dem Event-Konstruktor wie folgt erstellt werden:

- -
var event = new Event('build');
-
-// Listen for the event.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// Dispatch the event.
-elem.dispatchEvent(event);
- -

Das obige Codebeispiel verwendet die Methode EventTarget.dispatchEvent().

- -

Dieser Konstruktor wird in den meisten modernen Browsern unterstützt (mit Ausnahme des Internet Explorers). Für einen ausführlicheren Ansatz (der mit dem Internet Explorer funktioniert) siehe den altmodischen Weg unten.

- -

Hinzufügen von benutzerdefinierten Daten - CustomEvent()

- -

Um weitere Daten zum Ereignisobjekt hinzuzufügen, existiert die CustomEvent-Schnittstelle und die Detaileigenschaft kann zur Übergabe von benutzerdefinierten Daten verwendet werden.
- Beispielsweise könnte das Ereignis wie folgt angelegt werden:

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

Auf diese Weise können Sie dann auf die zusätzlichen Daten im Event-Listener zugreifen:

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

Auf die altmodische Art und Weise

- -

Der ältere Ansatz zur Erstellung von Ereignissen verwendet APIs, die von Java inspiriert sind. Im Folgenden ist ein Beispiel dargestellt:

- -
// Create the event.
-var event = document.createEvent('Event');
-
-// Define that the event name is 'build'.
-event.initEvent('build', true, true);
-
-// Listen for the event.
-elem.addEventListener('build', function (e) {
-  // e.target matches elem
-}, false);
-
-// target can be any Element or other EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Ereignisbubbling

- -

Es ist oft wünschenswert, ein Ereignis aus einem untergeordneten Element auszulösen und von einem Vorfahren abfangen zu lassen; optional mit Daten:

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

Dynamisches Erstellen und Versenden von Ereignissen

- -

Elemente können auf Ereignisse warten, die noch nicht erstellt wurden:

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // Create and dispatch/trigger an event on the fly
-  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

Auslösen von eingebauten Ereignissen

- -

Dieses Beispiel demonstriert die Simulation eines Klicks (d.h. das programmgesteuerte Erzeugen eines Klickereignisses) auf einem Kontrollkästchen mit Hilfe von DOM-Methoden.

- -

Sehen Sie sich das Beispiel in Aktion an.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
- -

Siehe auch

- - diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index a1e4ec8825..4b19728752 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1831,6 +1831,7 @@ /es/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /es/docs/Web/API/Element/nextElementSibling /es/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /es/docs/Web/API/Element/previousElementSibling /es/docs/Web/API/Notifications_API/Usando_la_API_de_Notificaciones /es/docs/Web/API/Notifications_API/Using_the_Notifications_API +/es/docs/Web/API/ParentNode/append /es/docs/orphaned/Web/API/ParentNode/append /es/docs/Web/API/ParentNode/childElementCount /es/docs/Web/API/Element/childElementCount /es/docs/Web/API/ParentNode/children /es/docs/orphaned/Web/API/ParentNode/children /es/docs/Web/API/ParentNode/firstElementChild /es/docs/orphaned/Web/API/ParentNode/firstElementChild @@ -2045,9 +2046,10 @@ /es/docs/Web/Guide/CSS/probando_media_queries /es/docs/Web/CSS/Media_Queries/Testing_media_queries /es/docs/Web/Guide/DOM /es/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 /es/docs/Web/Guide/DOM/Events /es/docs/Web/Guide/Events -/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos /es/docs/Web/Guide/Events/Creating_and_triggering_events +/es/docs/Web/Guide/DOM/Events/Creacion_y_Activación_Eventos /es/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/DOM/Events/eventos_controlador /es/docs/Web/Guide/Events/Event_handlers +/es/docs/Web/Guide/Events/Creating_and_triggering_events /es/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /es/docs/Web/Guide/HTML /es/docs/Learn/HTML /es/docs/Web/Guide/HTML/Canvas_tutorial /es/docs/Web/API/Canvas_API/Tutorial /es/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /es/docs/Web/API/Canvas_API/Tutorial/Advanced_animations diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 15e74b85a8..4518fc9495 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -5865,12 +5865,6 @@ "Sebastianz" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T22:24:28.452Z", - "contributors": [ - "Kyuoraku" - ] - }, "Web/API/Payment_Request_API": { "modified": "2020-10-15T22:33:12.666Z", "contributors": [ @@ -16501,16 +16495,6 @@ "TibicenasDesign" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-23T22:58:27.867Z", - "contributors": [ - "gAval997", - "juanpablocarrillo", - "BrunoViera", - "enreda", - "Soid" - ] - }, "Web/Guide/Events/Event_handlers": { "modified": "2020-08-01T23:47:25.815Z", "contributors": [ @@ -23743,5 +23727,21 @@ "contributors": [ "Grijander81" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T22:24:28.452Z", + "contributors": [ + "Kyuoraku" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T22:58:27.867Z", + "contributors": [ + "gAval997", + "juanpablocarrillo", + "BrunoViera", + "enreda", + "Soid" + ] } } \ No newline at end of file diff --git a/files/es/orphaned/web/api/parentnode/append/index.html b/files/es/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..4944a7fe68 --- /dev/null +++ b/files/es/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,135 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

+ +

Diferencias con {{domxref("Node.appendChild()")}}:

+ + + +

Sintaxis

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

Parameters

+ +
+
nodes
+
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
+
+ +

Exceptions

+ + + +

Examples

+ +

Appending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Appending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() is unscopable

+ +

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

See also

+ + diff --git a/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..057a0273fa --- /dev/null +++ b/files/es/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,145 @@ +--- +title: Creación y activación de eventos (Event) +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - DOM + - Guía + - JavaScript + - Sintetico + - eventos +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

+ +

Crear eventos personalizados

+ +

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

+ +
var event = new Event('build');
+
+// Escucha para el evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Disparar event.
+elem.dispatchEvent(event);
+ +

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

+ +

Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

+ +

Adición de datos personalizados con CustomEvent ()

+ +

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
+ Por Ejemplo, el evento se puede crear de la siguiente manera:

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

La Forma Antigua

+ +

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

+ +
// Creamos el evento.
+var event = document.createEvent('Event');
+
+/* Definimos el nombre del evento que es 'build'.*/
+event.initEvent('build', true, true);
+
+// Asignamos el evento.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+
+ +

El disparo incorporado eventos

+ +

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}
+ +

Compatibilidad con los Navegadores

+ +

 

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
+
+ +

See also

+ + diff --git a/files/es/web/api/parentnode/append/index.html b/files/es/web/api/parentnode/append/index.html deleted file mode 100644 index 3899492a80..0000000000 --- a/files/es/web/api/parentnode/append/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}}
- -

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

- -

Diferencias con {{domxref("Node.appendChild()")}}:

- - - -

Sintaxis

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

Parameters

- -
-
nodes
-
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
-
- -

Exceptions

- - - -

Examples

- -

Appending an element

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Appending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() is unscopable

- -

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.append")}}

- -

See also

- - diff --git a/files/es/web/guide/events/creating_and_triggering_events/index.html b/files/es/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 0b560935a1..0000000000 --- a/files/es/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos ---- -

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

- -

Crear eventos personalizados

- -

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

- -
var event = new Event('build');
-
-// Escucha para el evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Disparar event.
-elem.dispatchEvent(event);
- -

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

- -

Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

- -

Adición de datos personalizados con CustomEvent ()

- -

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
- Por Ejemplo, el evento se puede crear de la siguiente manera:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

La Forma Antigua

- -

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

- -
// Creamos el evento.
-var event = document.createEvent('Event');
-
-/* Definimos el nombre del evento que es 'build'.*/
-event.initEvent('build', true, true);
-
-// Asignamos el evento.
-document.addEventListener('build', function (e) {
-  // e.target matches document from above
-}, false);
-
-// target can be any Element or other EventTarget.
-document.dispatchEvent(event);
-
-
- -

El disparo incorporado eventos

- -

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    // A handler called preventDefault.
-    alert("canceled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not canceled");
-  }
-}
- -

Compatibilidad con los Navegadores

- -

 

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

See also

- - diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 4fdae5dc7a..b6cf255d2a 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -3799,10 +3799,12 @@ /fr/docs/Web/API/Node/nodePrincipal /fr/docs/conflicting/Web/API/Node_378aed5ed6869e50853edbc988cf9556 /fr/docs/Web/API/Node/prefix /fr/docs/conflicting/Web/API/Element/prefix /fr/docs/Web/API/Node/rootNode /fr/docs/conflicting/Web/API/Node/getRootNode +/fr/docs/Web/API/ParentNode/append /fr/docs/orphaned/Web/API/ParentNode/append /fr/docs/Web/API/ParentNode/childElementCount /fr/docs/Web/API/Element/childElementCount /fr/docs/Web/API/ParentNode/children /fr/docs/orphaned/Web/API/ParentNode/children /fr/docs/Web/API/ParentNode/firstElementChild /fr/docs/orphaned/Web/API/ParentNode/firstElementChild /fr/docs/Web/API/ParentNode/lastElementChild /fr/docs/orphaned/Web/API/ParentNode/lastElementChild +/fr/docs/Web/API/ParentNode/prepend /fr/docs/orphaned/Web/API/ParentNode/prepend /fr/docs/Web/API/PasswordCredential/additionalData /fr/docs/conflicting/Web/API/PasswordCredential /fr/docs/Web/API/PasswordCredential/idName /fr/docs/conflicting/Web/API/PasswordCredential_cbf7b306e83a3f58ff06bccf89637c12 /fr/docs/Web/API/PasswordCredential/passwordName /fr/docs/conflicting/Web/API/PasswordCredential_bc57d5dfa87242b4fb83497887124f41 @@ -4416,7 +4418,7 @@ /fr/docs/Web/Guide/CSS/Flexible_boxes /fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /fr/docs/Web/Guide/DOM /fr/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 /fr/docs/Web/Guide/DOM/Events /fr/docs/Web/Guide/Events -/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events /fr/docs/Web/Guide/Events/Creating_and_triggering_events +/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events /fr/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /fr/docs/Web/Guide/DOM/Events/Les_données_d_orientation_et_de_mouvement_expliquées /fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained /fr/docs/Web/Guide/DOM/Events/Touch_events /fr/docs/Web/API/Touch_events /fr/docs/Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris /fr/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent @@ -4425,6 +4427,7 @@ /fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur /fr/docs/Web/API/History_API /fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example /fr/docs/Web/API/History_API/Example /fr/docs/Web/Guide/DOM/Using_full_screen_mode /fr/docs/Web/API/Fullscreen_API +/fr/docs/Web/Guide/Events/Creating_and_triggering_events /fr/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas /fr/docs/conflicting/Web/API/Canvas_API/Tutorial /fr/docs/Web/Guide/HTML /fr/docs/Learn/HTML /fr/docs/Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide /fr/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 20fb17c8e3..271068eb88 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -11692,22 +11692,6 @@ "fscholz" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T21:59:23.058Z", - "contributors": [ - "Yukulele.", - "Watilin", - "ayshiff" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:02:32.998Z", - "contributors": [ - "Yukulele.", - "Seblor", - "loella16" - ] - }, "Web/API/ParentNode/querySelector": { "modified": "2020-10-15T22:30:52.578Z", "contributors": [ @@ -35231,16 +35215,6 @@ "wordsbybird" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2020-10-15T21:40:07.710Z", - "contributors": [ - "tristantheb", - "loella16", - "csblo", - "yasakura_", - "jmh" - ] - }, "Web/Guide/Events": { "modified": "2020-08-30T07:20:46.985Z", "contributors": [ @@ -45335,5 +45309,31 @@ "contributors": [ "loella16" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T21:59:23.058Z", + "contributors": [ + "Yukulele.", + "Watilin", + "ayshiff" + ] + }, + "orphaned/Web/API/ParentNode/prepend": { + "modified": "2020-10-15T22:02:32.998Z", + "contributors": [ + "Yukulele.", + "Seblor", + "loella16" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2020-10-15T21:40:07.710Z", + "contributors": [ + "tristantheb", + "loella16", + "csblo", + "yasakura_", + "jmh" + ] } } \ No newline at end of file diff --git a/files/fr/orphaned/web/api/parentnode/append/index.html b/files/fr/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..a908d4108e --- /dev/null +++ b/files/fr/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,138 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +tags: + - API + - DOM + - Reference +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

La méthode ParentNode.append insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de ParentNode. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.

+ +

Différences avec {{domxref("Node.appendChild()")}} :

+ + + +

Syntaxe

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

Paramètres

+ +
+
nodes
+
Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.
+
+ +

Exceptions

+ + + +

Exemples

+ +

Ajouter un élément

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Ajouter du texte

+ +
var parent = document.createElement("div");
+parent.append("Du texte");
+
+console.log(parent.textContent); // "Du texte"
+ +

Ajouter un élément et du texte

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Du texte", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Du texte", <p> ]
+ +

ParentNode.append() est unscopable

+ +

La méthode append() n’est pas accessible dans un bloc with. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

Vous pouvez utiliser la méthode append() dans Internet Explorer 9 (et supérieur) avec le code suivant :

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ParentNode.append")}}

+ +

Voir également

+ + diff --git a/files/fr/orphaned/web/api/parentnode/prepend/index.html b/files/fr/orphaned/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..0845356a51 --- /dev/null +++ b/files/fr/orphaned/web/api/parentnode/prepend/index.html @@ -0,0 +1,138 @@ +--- +title: ParentNode.prepend() +slug: orphaned/Web/API/ParentNode/prepend +tags: + - API + - DOM + - Méthodes + - Noeuds + - parent +translation_of: Web/API/ParentNode/prepend +original_slug: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

La méthode ParentNode.prepend insère un jeu d'objets {{domxref("Node")}} (noeud) ou {{domxref("DOMString")}} (chaîne de caractères) avant le premier enfant de ParentNode. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.

+ +

Syntaxe

+ +
ParentNode.prepend(nodesToPrepend);
+
+ +

Paramètres

+ +
+
nodesToPrepend
+
Un noeud ou plus à insérer avant le premier noeud enfant dans le ParentNode courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.
+
+ +

Valeur retournée

+ +

undefined (indéfini).

+ +

Exceptions

+ + + +

Exemples

+ +

Ajout d'un élément

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Ajout d'un texte

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Ajout d'un élément et d'un texte

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() est non accessible

+ +

La méthode prepend() n'est pas comprise dans l'instruction with. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined (prepend n'est pas défini)
+ +

Polyfill

+ +

vous pouvez utiliser le polyfill pour la méthode prepend() si elle n'est pas disponible :

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ParentNode.prepend")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/fr/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..d00b3bd6c4 --- /dev/null +++ b/files/fr/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,97 @@ +--- +title: Création et déclenchement d'événements +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - API + - Avancé + - DOM + - Guide + - JavaScript + - évènements +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés événements synthétiques afin de les distinguer des événements levés par le navigateur lui-même.

+ +

Création d'événements personnalisés

+ +

Les événements peuvent être créés avec le constructeur Event de cette manière :

+ +
var event = new Event('build');
+
+//Ecouter l'événement.
+elem.addEventListener('build', function (e) { ... }, false);
+
+//distribuer l'événement.
+elem.dispatchEvent(event);
+ +

Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir l'ancienne approche ci-dessous.

+ +

Ajout de données personnalisée - CustomEvent ()

+ +

Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété detail peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

L'ancienne approche

+ +

L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :

+ +
// Crée l'événement
+var event = document.createEvent('Event');
+
+// Nomme l'événement 'build'.
+event.initEvent('build', true, true);
+
+// Écoute l'événement.
+elem.addEventListener('build', function (e) {
+  // e.target correspond à elem
+}, false);
+
+// target peut être n'importe quel Element ou autre EventTarget.
+elem.dispatchEvent(event);
+
+
+ +

Le déclenchement d'événements intégrés

+ +

Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. Voir l'exemple en action.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    //Un gestionnaire appelé preventDefault.
+    alert("canceled");
+  } else {
+    //Aucun gestionnaires appelé preventDefault.
+    alert("not canceled");
+  }
+}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Event.Event")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/append/index.html b/files/fr/web/api/parentnode/append/index.html deleted file mode 100644 index d6818894a3..0000000000 --- a/files/fr/web/api/parentnode/append/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -tags: - - API - - DOM - - Reference -translation_of: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}}
- -

La méthode ParentNode.append insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de ParentNode. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.

- -

Différences avec {{domxref("Node.appendChild()")}} :

- - - -

Syntaxe

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

Paramètres

- -
-
nodes
-
Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.
-
- -

Exceptions

- - - -

Exemples

- -

Ajouter un élément

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Ajouter du texte

- -
var parent = document.createElement("div");
-parent.append("Du texte");
-
-console.log(parent.textContent); // "Du texte"
- -

Ajouter un élément et du texte

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Du texte", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Du texte", <p> ]
- -

ParentNode.append() est unscopable

- -

La méthode append() n’est pas accessible dans un bloc with. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

Vous pouvez utiliser la méthode append() dans Internet Explorer 9 (et supérieur) avec le code suivant :

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ParentNode.append")}}

- -

Voir également

- - diff --git a/files/fr/web/api/parentnode/prepend/index.html b/files/fr/web/api/parentnode/prepend/index.html deleted file mode 100644 index a11511c3c8..0000000000 --- a/files/fr/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -tags: - - API - - DOM - - Méthodes - - Noeuds - - parent -translation_of: Web/API/ParentNode/prepend ---- -
{{APIRef("DOM")}}
- -

La méthode ParentNode.prepend insère un jeu d'objets {{domxref("Node")}} (noeud) ou {{domxref("DOMString")}} (chaîne de caractères) avant le premier enfant de ParentNode. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.

- -

Syntaxe

- -
ParentNode.prepend(nodesToPrepend);
-
- -

Paramètres

- -
-
nodesToPrepend
-
Un noeud ou plus à insérer avant le premier noeud enfant dans le ParentNode courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.
-
- -

Valeur retournée

- -

undefined (indéfini).

- -

Exceptions

- - - -

Exemples

- -

Ajout d'un élément

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

Ajout d'un texte

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Ajout d'un élément et d'un texte

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() est non accessible

- -

La méthode prepend() n'est pas comprise dans l'instruction with. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined (prepend n'est pas défini)
- -

Polyfill

- -

vous pouvez utiliser le polyfill pour la méthode prepend() si elle n'est pas disponible :

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.ParentNode.prepend")}}

- -

Voir aussi

- - diff --git a/files/fr/web/guide/events/creating_and_triggering_events/index.html b/files/fr/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index a15f241ff1..0000000000 --- a/files/fr/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Création et déclenchement d'événements -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - API - - Avancé - - DOM - - Guide - - JavaScript - - évènements -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/DOM/Events/Creating_and_triggering_events ---- -

Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés événements synthétiques afin de les distinguer des événements levés par le navigateur lui-même.

- -

Création d'événements personnalisés

- -

Les événements peuvent être créés avec le constructeur Event de cette manière :

- -
var event = new Event('build');
-
-//Ecouter l'événement.
-elem.addEventListener('build', function (e) { ... }, false);
-
-//distribuer l'événement.
-elem.dispatchEvent(event);
- -

Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir l'ancienne approche ci-dessous.

- -

Ajout de données personnalisée - CustomEvent ()

- -

Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété detail peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

L'ancienne approche

- -

L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :

- -
// Crée l'événement
-var event = document.createEvent('Event');
-
-// Nomme l'événement 'build'.
-event.initEvent('build', true, true);
-
-// Écoute l'événement.
-elem.addEventListener('build', function (e) {
-  // e.target correspond à elem
-}, false);
-
-// target peut être n'importe quel Element ou autre EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Le déclenchement d'événements intégrés

- -

Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. Voir l'exemple en action.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    //Un gestionnaire appelé preventDefault.
-    alert("canceled");
-  } else {
-    //Aucun gestionnaires appelé preventDefault.
-    alert("not canceled");
-  }
-}
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.Event.Event")}}

- -

Voir aussi

- - diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 44f528c814..093e37fee3 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3923,8 +3923,10 @@ /ja/docs/Web/API/Node/prefix /ja/docs/conflicting/Web/API/Element/prefix /ja/docs/Web/API/NodeList.item /ja/docs/Web/API/NodeList/item /ja/docs/Web/API/NonDocumentTypeChildNode /ja/docs/conflicting/Web/API/Element_861159909c20acebf8e506c3bb0e2f7e +/ja/docs/Web/API/ParentNode/append /ja/docs/orphaned/Web/API/ParentNode/append /ja/docs/Web/API/ParentNode/childElementCount /ja/docs/Web/API/Element/childElementCount /ja/docs/Web/API/ParentNode/children /ja/docs/orphaned/Web/API/ParentNode/children +/ja/docs/Web/API/ParentNode/prepend /ja/docs/orphaned/Web/API/ParentNode/prepend /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API @@ -4472,6 +4474,7 @@ /ja/docs/Web/Compatibility_FAQ/Underline_Color_Diffrence.html /ja/docs/orphaned/Web/Compatibility_FAQ/Underline_Color_Diffrence.html /ja/docs/Web/Events/Activate /ja/docs/Web/API/Element/DOMActivate_event /ja/docs/Web/Events/DOMContentLoaded /ja/docs/Web/API/Window/DOMContentLoaded_event +/ja/docs/Web/Events/Index /ja/docs/orphaned/Web/Events/Index /ja/docs/Web/Events/abort /ja/docs/Web/API/HTMLMediaElement/abort_event /ja/docs/Web/Events/abort_(ProgressEvent) /ja/docs/Web/API/XMLHttpRequest/abort_event /ja/docs/Web/Events/audiostart /ja/docs/Web/API/SpeechRecognition/audiostart_event @@ -4570,6 +4573,7 @@ /ja/docs/Web/Guide/DOM/Manipulating_the_browser_history/Working_with_the_History_API /ja/docs/Web/API/History_API/Working_with_the_History_API /ja/docs/Web/Guide/DOM/Using_full_screen_mode /ja/docs/Web/API/Fullscreen_API /ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM /ja/docs/Web/API/Document_Object_Model/Whitespace +/ja/docs/Web/Guide/Events/Creating_and_triggering_events /ja/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /ja/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas /ja/docs/conflicting/Web/API/Canvas_API/Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d /ja/docs/Web/Guide/HTML /ja/docs/Learn/HTML /ja/docs/Web/Guide/HTML/Canvas_tutorial /ja/docs/conflicting/Web/API/Canvas_API/Tutorial diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index d0b870246b..c8a29de950 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -19087,21 +19087,6 @@ "YuichiNukiyama" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T22:19:11.886Z", - "contributors": [ - "mfuji09", - "dskymd", - "isdh" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:22:02.876Z", - "contributors": [ - "mfuji09", - "silverskyvicto" - ] - }, "Web/API/ParentNode/querySelectorAll": { "modified": "2020-10-15T22:26:50.502Z", "contributors": [ @@ -32570,13 +32555,6 @@ "Sheppy" ] }, - "Web/Events/Index": { - "modified": "2019-01-17T03:54:54.751Z", - "contributors": [ - "mfuji09", - "silverskyvicto" - ] - }, "Web/Guide": { "modified": "2020-01-12T11:59:05.782Z", "contributors": [ @@ -32724,18 +32702,6 @@ "gportioli" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-10-27T15:17:19.485Z", - "contributors": [ - "mfuji09", - "SphinxKnight", - "unarist", - "dskmori", - "ShotaCoffee", - "y4m4to", - "lv7777" - ] - }, "Web/Guide/Events/Event_handlers": { "modified": "2020-08-30T04:00:41.655Z", "contributors": [ @@ -53496,5 +53462,39 @@ "segayuu", "sii" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T22:19:11.886Z", + "contributors": [ + "mfuji09", + "dskymd", + "isdh" + ] + }, + "orphaned/Web/API/ParentNode/prepend": { + "modified": "2020-10-15T22:22:02.876Z", + "contributors": [ + "mfuji09", + "silverskyvicto" + ] + }, + "orphaned/Web/Events/Index": { + "modified": "2019-01-17T03:54:54.751Z", + "contributors": [ + "mfuji09", + "silverskyvicto" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-10-27T15:17:19.485Z", + "contributors": [ + "mfuji09", + "SphinxKnight", + "unarist", + "dskmori", + "ShotaCoffee", + "y4m4to", + "lv7777" + ] } } \ No newline at end of file diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..e218b7fe54 --- /dev/null +++ b/files/ja/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,145 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +tags: + - API + - DOM + - Method + - Node + - ParentNode + - Reference +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +

{{APIRef("DOM")}}

+ +

ParentNode.append() メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを ParentNode の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。

+ +

{{domxref("Node.appendChild()")}} との違いは次の通りです。

+ + + +

構文

+ +
// [Throws, Unscopable]
+ParentNode.append(...nodesOrDOMStrings) // returns undefined
+
+ +

引数

+ +
+
nodes
+
追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット
+
+ +

例外

+ + + +

例

+ +

要素の追加

+ +
let parent = document.createElement("div")
+let p = document.createElement("p")
+parent.append(p)
+
+console.log(parent.childNodes) // NodeList [ <p> ]
+
+ +

テキストの追加

+ +
let parent = document.createElement("div")
+parent.append("Some text")
+
+console.log(parent.textContent) // "Some text"
+ +

要素とテキストの追加

+ +
let parent = document.createElement("div")
+let p = document.createElement("p")
+parent.append("Some text", p)
+
+console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() はスコープが効かない

+ +

append() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

+ +
let parent = document.createElement("div")
+
+with(parent) {
+  append("foo")
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

append() メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..6e60e441f1 --- /dev/null +++ b/files/ja/orphaned/web/api/parentnode/prepend/index.html @@ -0,0 +1,145 @@ +--- +title: ParentNode.prepend() +slug: orphaned/Web/API/ParentNode/prepend +tags: + - API + - DOM + - Method + - Node + - ParentNode + - Reference + - prepend +translation_of: Web/API/ParentNode/prepend +original_slug: Web/API/ParentNode/prepend +--- +

{{APIRef("DOM")}}

+ +

ParentNode.prepend() メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。

+ +

構文

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

引数

+ +
+
nodesToPrepend
+
現在 ParentNode にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。
+
+ +

返値

+ +

undefined.

+ +

例外

+ + + +

例

+ +

要素の前に追加

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

テキストの前に追加

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

要素とテキストの追加

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() はスコープが効かない

+ +

prepend() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Polyfill

+ +

prepend() メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/events/index/index.html b/files/ja/orphaned/web/events/index/index.html new file mode 100644 index 0000000000..63f469434b --- /dev/null +++ b/files/ja/orphaned/web/events/index/index.html @@ -0,0 +1,10 @@ +--- +title: 索引 +slug: orphaned/Web/Events/Index +tags: + - Index + - イベント +translation_of: Web/Events/Index +original_slug: Web/Events/Index +--- +

{{Index("/ja/docs/Web/Events")}}

diff --git a/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..9d2760dce6 --- /dev/null +++ b/files/ja/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,142 @@ +--- +title: イベントの作成と起動 +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - NeedsContent + - events +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

+ +

カスタムイベントを作成する

+ +

イベントは、次のように {{domxref("Event")}} コンストラクターを使用して作成できます。

+ +
var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

上記のコード例は {{domxref("EventTarget.dispatchEvent()")}} メソッドを使用します。

+ +

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の古い方法を参照して下さい。

+ +

カスタムデータの追加 – CustomEvent()

+ +

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

+ +

たとえば、イベントは次のように作成できます。

+ +
var event = new CustomEvent('build', { detail: elem.dataset.time });
+ +

これにより、イベントリスナー内の追加データにアクセスすることができます。

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

古い方法

+ +

イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。

+ +
// イベントの作成
+var event = document.createEvent('Event');
+
+// イベントの名前を 'build' と定義する
+event.initEvent('build', true, true);
+
+// イベントを待ち受けする
+elem.addEventListener('build', function (e) {
+  // e.target が elem と一致したとき
+}, false);
+
+// 対象が何らかの Element またはその他の EventTarget の場合
+elem.dispatchEvent(event);
+
+
+ +

イベントのバブリング

+ +

子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+
+ +

イベントの動的な生成と処理

+ +

要素はまだ作成されていないイベントを待ち受けすることができます。

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+
+ +

ビルトインイベントの起動

+ +

この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。デモを見る。

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+ +

関連情報

+ + diff --git a/files/ja/web/api/parentnode/append/index.html b/files/ja/web/api/parentnode/append/index.html deleted file mode 100644 index 80388f1889..0000000000 --- a/files/ja/web/api/parentnode/append/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append ---- -

{{APIRef("DOM")}}

- -

ParentNode.append() メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを ParentNode の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。

- -

{{domxref("Node.appendChild()")}} との違いは次の通りです。

- - - -

構文

- -
// [Throws, Unscopable]
-ParentNode.append(...nodesOrDOMStrings) // returns undefined
-
- -

引数

- -
-
nodes
-
追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット
-
- -

例外

- - - -

例

- -

要素の追加

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append(p)
-
-console.log(parent.childNodes) // NodeList [ <p> ]
-
- -

テキストの追加

- -
let parent = document.createElement("div")
-parent.append("Some text")
-
-console.log(parent.textContent) // "Some text"
- -

要素とテキストの追加

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append("Some text", p)
-
-console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() はスコープが効かない

- -

append() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

- -
let parent = document.createElement("div")
-
-with(parent) {
-  append("foo")
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

append() メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.ParentNode.append")}}

- -

関連情報

- - diff --git a/files/ja/web/api/parentnode/prepend/index.html b/files/ja/web/api/parentnode/prepend/index.html deleted file mode 100644 index 1fe476ead7..0000000000 --- a/files/ja/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend -translation_of: Web/API/ParentNode/prepend ---- -

{{APIRef("DOM")}}

- -

ParentNode.prepend() メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。

- -

構文

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

引数

- -
-
nodesToPrepend
-
現在 ParentNode にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。
-
- -

返値

- -

undefined.

- -

例外

- - - -

例

- -

要素の前に追加

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

テキストの前に追加

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

要素とテキストの追加

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() はスコープが効かない

- -

prepend() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

prepend() メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

関連情報

- - diff --git a/files/ja/web/events/index/index.html b/files/ja/web/events/index/index.html deleted file mode 100644 index b757284a27..0000000000 --- a/files/ja/web/events/index/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: 索引 -slug: Web/Events/Index -tags: - - Index - - イベント -translation_of: Web/Events/Index ---- -

{{Index("/ja/docs/Web/Events")}}

diff --git a/files/ja/web/guide/events/creating_and_triggering_events/index.html b/files/ja/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 442a8be237..0000000000 --- a/files/ja/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: イベントの作成と起動 -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - JavaScript - - NeedsContent - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

- -

カスタムイベントを作成する

- -

イベントは、次のように {{domxref("Event")}} コンストラクターを使用して作成できます。

- -
var event = new Event('build');
-
-// Listen for the event.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// Dispatch the event.
-elem.dispatchEvent(event);
- -

上記のコード例は {{domxref("EventTarget.dispatchEvent()")}} メソッドを使用します。

- -

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の古い方法を参照して下さい。

- -

カスタムデータの追加 – CustomEvent()

- -

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

- -

たとえば、イベントは次のように作成できます。

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

これにより、イベントリスナー内の追加データにアクセスすることができます。

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

古い方法

- -

イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。

- -
// イベントの作成
-var event = document.createEvent('Event');
-
-// イベントの名前を 'build' と定義する
-event.initEvent('build', true, true);
-
-// イベントを待ち受けする
-elem.addEventListener('build', function (e) {
-  // e.target が elem と一致したとき
-}, false);
-
-// 対象が何らかの Element またはその他の EventTarget の場合
-elem.dispatchEvent(event);
-
-
- -

イベントのバブリング

- -

子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 新しいイベントを生成し、バブリングを許可し、 "detail" プロパティに渡したいデータを設定する
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

イベントの動的な生成と処理

- -

要素はまだ作成されていないイベントを待ち受けすることができます。

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // Create and dispatch/trigger an event on the fly
-  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

ビルトインイベントの起動

- -

この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。デモを見る。

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
- -

関連情報

- - diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 75f135b7b3..b0905fe764 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -660,8 +660,10 @@ /ko/docs/Web/API/NetworkInformation/connection /ko/docs/Web/API/Navigator/connection /ko/docs/Web/API/Node/innerText /ko/docs/Web/API/HTMLElement/innerText /ko/docs/Web/API/Notification.permission /ko/docs/Web/API/Notification/permission +/ko/docs/Web/API/ParentNode/append /ko/docs/orphaned/Web/API/ParentNode/append /ko/docs/Web/API/ParentNode/childElementCount /ko/docs/Web/API/Element/childElementCount /ko/docs/Web/API/ParentNode/children /ko/docs/orphaned/Web/API/ParentNode/children +/ko/docs/Web/API/ParentNode/prepend /ko/docs/orphaned/Web/API/ParentNode/prepend /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues @@ -801,6 +803,7 @@ /ko/docs/Web/Guide/CSS/Visual_formatting_model /ko/docs/Web/CSS/Visual_formatting_model /ko/docs/Web/Guide/DOM /ko/docs/conflicting/Web/API/Document_Object_Model /ko/docs/Web/Guide/DOM/Using_full_screen_mode /ko/docs/Web/API/Fullscreen_API +/ko/docs/Web/Guide/Events/Creating_and_triggering_events /ko/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /ko/docs/Web/Guide/HTML /ko/docs/Learn/HTML /ko/docs/Web/Guide/HTML/Content_Editable /ko/docs/Web/Guide/HTML/Editable_content /ko/docs/Web/Guide/HTML/컨텐트_카테고리 /ko/docs/Web/Guide/HTML/Content_categories diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 7e84e41438..cb8b655ecf 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -5177,18 +5177,6 @@ "ExE-Boss" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T22:23:54.799Z", - "contributors": [ - "ChanMyeong" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:19:18.906Z", - "contributors": [ - "JungSWon" - ] - }, "Web/API/Performance": { "modified": "2020-10-15T21:53:34.737Z", "contributors": [ @@ -8852,12 +8840,6 @@ "moolow" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-18T21:13:18.844Z", - "contributors": [ - "cs09g" - ] - }, "Web/Guide/Events/Overview_of_Events_and_Handlers": { "modified": "2019-03-23T22:48:26.046Z", "contributors": [ @@ -18704,5 +18686,23 @@ "contributors": [ "whdckszxxx" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T22:23:54.799Z", + "contributors": [ + "ChanMyeong" + ] + }, + "orphaned/Web/API/ParentNode/prepend": { + "modified": "2020-10-15T22:19:18.906Z", + "contributors": [ + "JungSWon" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-18T21:13:18.844Z", + "contributors": [ + "cs09g" + ] } } \ No newline at end of file diff --git a/files/ko/orphaned/web/api/parentnode/append/index.html b/files/ko/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..a488b110bc --- /dev/null +++ b/files/ko/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,135 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.

+ +

{{domxref("Node.appendChild()")}}와 다른 점:

+ + + +

문법

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

매개 변수

+ +
+
nodes
+
삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.
+
+ +

예외

+ + + +

예제

+ +

요소(element) 추가하기

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

문자(text) 추가하기

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

요소(element)와 문자(text) 함께 추가하기

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() 범위 지정 불가

+ +

append() 메소드는 with 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

대체 구현

+ +

다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 append() method를 대체하여 구현할 수 있다.

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

명세

+ + + + + + + + + + + + + + +
명세상태참고
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

참고

+ + diff --git a/files/ko/orphaned/web/api/parentnode/prepend/index.html b/files/ko/orphaned/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..989246cdc1 --- /dev/null +++ b/files/ko/orphaned/web/api/parentnode/prepend/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.prepend() +slug: orphaned/Web/API/ParentNode/prepend +translation_of: Web/API/ParentNode/prepend +original_slug: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

ParentNode.prepend() 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.

+ +

Syntax

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

Parameters

+ +
+
nodesToPrepend
+
One or more nodes to insert before the first child node currently in the ParentNode. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.
+
+ +

Return value

+ +

undefined.

+ +

Exceptions

+ + + +

Examples

+ +

Prepending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Prepending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() is unscopable

+ +

The prepend() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Polyfill

+ +

You can polyfill the prepend() method if it's not available:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

See also

+ + diff --git a/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..836db281db --- /dev/null +++ b/files/ko/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,141 @@ +--- +title: 이벤트 생성 및 트리거 +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - DOM + - NeedsContent + - 가이드 + - 고급 + - 이벤트 + - 자바스크립트 +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 인공 이벤트(synthetic events)라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.

+ +

커스텀 이벤트 생성하기

+ +

다음과 같이 Event 생성자를 사용해 Events 를 생성할 수 있습니다.

+ +
var event = new Event('build');
+
+// 이벤트 리슨.
+elem.addEventListener('build', function (e) { /* ... */ }, false);
+
+// 이벤트 디스패치.
+elem.dispatchEvent(event);
+ +

위 코드 예제는 EventTarget.dispatchEvent() 메소드를 사용합니다.

+ +

이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 옛날 방식 부분을 참고하세요.

+ +

커스텀 데이터 추가 – CustomEvent()

+ +

이벤트 객체에 더 많은 데이터를 추가하려면, CustomEvent 인터페이스가 존재하고 detail 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다
+ 예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.

+ +
var event = new CustomEvent('build', { detail: elem.dataset.time });
+ +

그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

옛날 방식

+ +

생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.

+ +
// 이벤트 생성.
+var event = document.createEvent('Event');
+
+// 이벤트 이름을 'build' 라 정의.
+event.initEvent('build', true, true);
+
+// 이벤트 리슨.
+elem.addEventListener('build', function (e) {
+  // e.target 은 elem 과 일치
+}, false);
+
+// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음.
+elem.dispatchEvent(event);
+
+
+ +

이벤트 버블링

+ +

자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+
+ +

이벤트를 동적으로 생성하고 디스패칭하기

+ +

엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.

+ +
<form>
+  <textarea></textarea>
+</form>
+
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // 이벤트 즉시 생성 및 디스패치/트리거
+  // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+
+ +

내장 이벤트 트리거

+ +

이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). 동작하는 예제를 확인하세요.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // 핸들러가 preventDefault 를 호출했음.
+    alert("cancelled");
+  } else {
+    // 어떤 핸들러도 preventDefault 를 호출하지 않음.
+    alert("not cancelled");
+  }
+}
+ +

함께 보기

+ + diff --git a/files/ko/web/api/parentnode/append/index.html b/files/ko/web/api/parentnode/append/index.html deleted file mode 100644 index 1c9496b65b..0000000000 --- a/files/ko/web/api/parentnode/append/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}}
- -

ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 {{domxref("Node")}} 객체 또는 {{domxref("DOMString")}} 객체를 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드처럼 삽입한다.

- -

{{domxref("Node.appendChild()")}}와 다른 점:

- - - -

문법

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

매개 변수

- -
-
nodes
-
삽입하려고 하는 {{domxref("Node")}} 객체 집합 또는 {{domxref("DOMString")}} 객체 집합.
-
- -

예외

- - - -

예제

- -

요소(element) 추가하기

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

문자(text) 추가하기

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

요소(element)와 문자(text) 함께 추가하기

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() 범위 지정 불가

- -

append() 메소드는 with 문으로 범위를 지정하지 않는다. 더 자세한 내용은 {{jsxref("Symbol.unscopables")}} 참고.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

대체 구현

- -

다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 append() method를 대체하여 구현할 수 있다.

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

명세

- - - - - - - - - - - - - - -
명세상태참고
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}초기 정의
- -

브라우저 호환성

- - - -

{{Compat("api.ParentNode.append")}}

- -

참고

- - diff --git a/files/ko/web/api/parentnode/prepend/index.html b/files/ko/web/api/parentnode/prepend/index.html deleted file mode 100644 index 1877529adc..0000000000 --- a/files/ko/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -translation_of: Web/API/ParentNode/prepend ---- -
{{APIRef("DOM")}}
- -

ParentNode.prepend() 메소드는 {{domxref("Node")}} 객체 또는{{domxref("DOMString")}} 객체를 {{domxref("ParentNode")}}의 첫 자식노드 앞에 삽입한다. {{domxref("DOMString")}} 객체는 {{domxref("Text")}} 노드와 동일하게 삽입된다.

- -

Syntax

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

Parameters

- -
-
nodesToPrepend
-
One or more nodes to insert before the first child node currently in the ParentNode. Each node can be specified as either a {{domxref("Node")}} object or as a string; strings are inserted as new {{domxref("Text")}} nodes.
-
- -

Return value

- -

undefined.

- -

Exceptions

- - - -

Examples

- -

Prepending an element

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

Prepending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() is unscopable

- -

The prepend() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

You can polyfill the prepend() method if it's not available:

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

See also

- - diff --git a/files/ko/web/guide/events/creating_and_triggering_events/index.html b/files/ko/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 2c19b74b88..0000000000 --- a/files/ko/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: 이벤트 생성 및 트리거 -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - NeedsContent - - 가이드 - - 고급 - - 이벤트 - - 자바스크립트 -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

이 글은 DOM 이벤트를 생성하고 디스패치하는 방법에 대해 설명합니다. 이런 이벤트는 흔히 인공 이벤트(synthetic events)라고 불리며, 브라우저 자체에서 실행되는 이벤트와 반대입니다.

- -

커스텀 이벤트 생성하기

- -

다음과 같이 Event 생성자를 사용해 Events 를 생성할 수 있습니다.

- -
var event = new Event('build');
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) { /* ... */ }, false);
-
-// 이벤트 디스패치.
-elem.dispatchEvent(event);
- -

위 코드 예제는 EventTarget.dispatchEvent() 메소드를 사용합니다.

- -

이 생성자는 대부분의 최신 브라우저(Internet Exploere 는 예외)에서 지원됩니다. 더 장황한 접근법(Internet Explorer 에서도 동작하는)은, 아래 옛날 방식 부분을 참고하세요.

- -

커스텀 데이터 추가 – CustomEvent()

- -

이벤트 객체에 더 많은 데이터를 추가하려면, CustomEvent 인터페이스가 존재하고 detail 프로퍼티를 통해 커스텀 데이터를 전달할 수 있습니다
- 예를 들면, 다음과 같이 이벤트가 생성될 수 있습니다.

- -
var event = new CustomEvent('build', { detail: elem.dataset.time });
- -

그럼 이벤트 리스너의 부가적인 데이터에 접근할 수 있게 됩니다.

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

옛날 방식

- -

생성 이벤트로의 오래된 접근법은 Java 로부터 영감을 받은 API들을 사용합니다. 다음은 그 예시를 보여줍니다.

- -
// 이벤트 생성.
-var event = document.createEvent('Event');
-
-// 이벤트 이름을 'build' 라 정의.
-event.initEvent('build', true, true);
-
-// 이벤트 리슨.
-elem.addEventListener('build', function (e) {
-  // e.target 은 elem 과 일치
-}, false);
-
-// target 은 어떤 엘리먼트나 다른 이벤트 타켓이 될 수 있음.
-elem.dispatchEvent(event);
-
-
- -

이벤트 버블링

- -

자식 엘리먼트로부터 이벤트를 발생시키고 그 조상이 이를 캐치하도록 하는것은 종종 바람직합니다. 선택적으로 데이터도 함께합니다.

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// 새로운 이벤트를 생성하고, 버블링을 허용하며, "details" 프로퍼티로 전달할 데이터를 제공합니다
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// form 엘리먼트는 커스텀 "awesome" 이벤트를 리슨한 후 전달된 text() 메소드의 결과를 콘솔에 출력합니다
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// 사용자가 입력한대로, form 내의 textarea 는 이벤트를 디스패치/트리거하여 시작점으로 사용합니다
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
-
- -

이벤트를 동적으로 생성하고 디스패칭하기

- -

엘리먼트는 아직 생성되지 않은 이벤트를 리슨할 수 있습니다.

- -
<form>
-  <textarea></textarea>
-</form>
-
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // 이벤트 즉시 생성 및 디스패치/트리거
-  // 노트: 선택적으로, 우리는 "함수 표현"("화살표 함수 표현" 대신)을 사용하므로 "this"는 엘리먼트를 나타냅니다
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
-
- -

내장 이벤트 트리거

- -

이 예제는 DOM 메소드를 사용해 체크박스에 클릭을 시뮬레이팅하는 것을 보여줍니다(클릭 이벤트를 프로그래밍적으로 발생시키는 것입니다). 동작하는 예제를 확인하세요.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    view: window,
-    bubbles: true,
-    cancelable: true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // 핸들러가 preventDefault 를 호출했음.
-    alert("cancelled");
-  } else {
-    // 어떤 핸들러도 preventDefault 를 호출하지 않음.
-    alert("not cancelled");
-  }
-}
- -

함께 보기

- - diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index 37438cfa54..1353cbcc40 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -322,7 +322,7 @@ /pl/docs/DOM/Selection/toString /pl/docs/Web/API/Selection/toString /pl/docs/DOM/Storage /pl/docs/Web/API/Web_Storage_API /pl/docs/DOM/cssRule /pl/docs/Web/API/CSSRule -/pl/docs/DOM/dispatchEvent_-_przykład /pl/docs/Web/Guide/Events/Creating_and_triggering_events +/pl/docs/DOM/dispatchEvent_-_przykład /pl/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pl/docs/DOM/document /pl/docs/Web/API/Document /pl/docs/DOM/document.URL /pl/docs/Web/API/Document/URL /pl/docs/DOM/document.activeElement /pl/docs/Web/API/Document/activeElement @@ -570,7 +570,7 @@ /pl/docs/DOM:Selection:toString /pl/docs/Web/API/Selection/toString /pl/docs/DOM:Storage /pl/docs/Web/API/Web_Storage_API /pl/docs/DOM:cssRule /pl/docs/Web/API/CSSRule -/pl/docs/DOM:dispatchEvent_-_przykład /pl/docs/Web/Guide/Events/Creating_and_triggering_events +/pl/docs/DOM:dispatchEvent_-_przykład /pl/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pl/docs/DOM:document /pl/docs/Web/API/Document /pl/docs/DOM:document.URL /pl/docs/Web/API/Document/URL /pl/docs/DOM:document.activeElement /pl/docs/Web/API/Document/activeElement @@ -2105,6 +2105,7 @@ /pl/docs/Web/Guide/CSS /pl/docs/Learn/CSS /pl/docs/Web/Guide/CSS/Kolumny_CSS3 /pl/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /pl/docs/Web/Guide/CSS/Sprawdzanie_media_queries /pl/docs/Web/CSS/Media_Queries/Testing_media_queries +/pl/docs/Web/Guide/Events/Creating_and_triggering_events /pl/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pl/docs/Web/Guide/HTML /pl/docs/Learn/HTML /pl/docs/Web/Guide/HTML/Wprowadzenie /pl/docs/Learn/HTML/Introduction_to_HTML /pl/docs/Web/Guide/Liczniki_CSS /pl/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index fb9326f5e5..19cdb6c5e6 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -10655,15 +10655,6 @@ "Akustyk" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-23T23:50:28.341Z", - "contributors": [ - "khalid32", - "Mgjbot", - "Ptak82", - "Jan Dudek" - ] - }, "conflicting/Web/API/Document_Object_Model_7d961b8030c6099ee907f4f4b5fe6b3d": { "modified": "2019-03-23T23:54:33.828Z", "contributors": [ @@ -11745,5 +11736,14 @@ "contributors": [ "dk333" ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T23:50:28.341Z", + "contributors": [ + "khalid32", + "Mgjbot", + "Ptak82", + "Jan Dudek" + ] } } \ No newline at end of file diff --git a/files/pl/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pl/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..48b07b10ce --- /dev/null +++ b/files/pl/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,35 @@ +--- +title: dispatchEvent - przykład +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +
+ {{ ApiRef() }}
+

Poniższy przykład przedstawia symulację kliknięcia w pole wyboru opartą o metody DOM. Możesz zobaczyć przykład w działaniu.

+
function simulateClick() {
+  var evt = document.createEvent("MouseEvents");
+  evt.initMouseEvent("click", true, true, window,
+    0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  var cb = document.getElementById("checkbox");
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // metoda obsługi zdarzenia wywołała preventDefault
+    alert("canceled");
+  } else {
+    // nie wywołano preventDefault
+    alert("not canceled");
+  }
+}
+
+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "fr": "fr/DOM/dispatchEvent_exemple" } ) }}

diff --git a/files/pl/web/guide/events/creating_and_triggering_events/index.html b/files/pl/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index bc359ede78..0000000000 --- a/files/pl/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: dispatchEvent - przykład -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - Dokumentacja_Gecko_DOM - - Gecko - - Wszystkie_kategorie -translation_of: Web/Guide/Events/Creating_and_triggering_events -translation_of_original: Web/Guide/Events/Event_dispatching_example -original_slug: DOM/dispatchEvent_-_przykład ---- -
- {{ ApiRef() }}
-

Poniższy przykład przedstawia symulację kliknięcia w pole wyboru opartą o metody DOM. Możesz zobaczyć przykład w działaniu.

-
function simulateClick() {
-  var evt = document.createEvent("MouseEvents");
-  evt.initMouseEvent("click", true, true, window,
-    0, 0, 0, 0, 0, false, false, false, false, 0, null);
-  var cb = document.getElementById("checkbox");
-  var canceled = !cb.dispatchEvent(evt);
-  if(canceled) {
-    // metoda obsługi zdarzenia wywołała preventDefault
-    alert("canceled");
-  } else {
-    // nie wywołano preventDefault
-    alert("not canceled");
-  }
-}
-
-

 

-

 

-
-  
-

{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "fr": "fr/DOM/dispatchEvent_exemple" } ) }}

diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index dc5ef533e0..ab7c16ba17 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -730,9 +730,10 @@ /pt-BR/docs/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/Web/Guide/CSS/Scaling_background_images /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /pt-BR/docs/Web/Guide/CSS/Understanding_z_index /pt-BR/docs/Web/CSS/CSS_Positioning/Understanding_z_index +/pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Events/Mutation_events /pt-BR/docs/orphaned/Web/Guide/Events/Mutation_events /pt-BR/docs/Web/Guide/Events/Touch_events /pt-BR/docs/Web/API/Touch_events -/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events +/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Gráficos /pt-BR/docs/Web/Guide/Graphics /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial /pt-BR/docs/Web/API/Canvas_API/Tutorial /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /pt-BR/docs/Web/API/Canvas_API/Tutorial/Advanced_animations diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index dd23a42b41..a7076ab9f3 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -15829,12 +15829,6 @@ "MaxWilliamJF" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-23T22:11:33.073Z", - "contributors": [ - "JefersonOliveira90" - ] - }, "Web/API/Touch_events": { "modified": "2019-03-23T23:21:11.070Z", "contributors": [ @@ -17367,5 +17361,11 @@ "contributors": [ "rafaelcavalcante" ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T22:11:33.073Z", + "contributors": [ + "JefersonOliveira90" + ] } } \ No newline at end of file diff --git a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..fc886b74c6 --- /dev/null +++ b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,146 @@ +--- +title: Criando e disparando eventos +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - Avançado + - DOM + - Guía + - JavaScript + - eventos +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

+ +

Criando eventos customizados

+ +

Eventos podem ser criados com o construtor Event da seguinte forma:

+ +
var event = new Event('build');
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispara o evento.
+elem.dispatchEvent(event);
+ +

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

+ +

Adicionando dados customizados – CustomEvent()

+ +

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

+ +

Por exemplo, o evento pode ser criado da seguinte forma:

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

Isso permitirá que você acesse dados customizados no listener do evento:

+ +
function eventHandler(e) {
+  console.log('The time is: ' + e.detail);
+}
+
+ +

A forma antiga

+ +

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

+ +
// Cria o evento.
+var event = document.createEvent('Event');
+
+// Define que o nome do evento é 'build'.
+event.initEvent('build', true, true);
+
+// Ouve pelo evento.
+elem.addEventListener('build', function (e) {
+  // e.target é igual a elem, neste caso
+}, false);
+
+// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
+elem.dispatchEvent(event);
+
+
+ +

Disparando eventos nativos

+ +

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+
+  if (cancelled) {
+    // Um listener invocou o método preventDefault.
+    alert("Cancelado");
+  } else {
+    // Nenhum listener invocou o método preventDefault.
+    alert("Não cancelado");
+  }
+}
+ +

Compatibilidade entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
+
+ +

Veja também

+ + diff --git a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 82e42d1fe6..0000000000 --- a/files/pt-br/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Criando e disparando eventos -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/criando_e_disparando_eventos ---- -

Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados eventos sintéticos, oposto aos eventos disparados pelo próprio navegador.

- -

Criando eventos customizados

- -

Eventos podem ser criados com o construtor Event da seguinte forma:

- -
var event = new Event('build');
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Dispara o evento.
-elem.dispatchEvent(event);
- -

Este construtor é suportado na maioria dos navegadores modernos (com o Internet Explorer sendo exceção). Para uma abordagem mais verbosa (a qual é suportada pelo Internet Explorer), veja a forma antiga abaixo.

- -

Adicionando dados customizados – CustomEvent()

- -

Para adicionar mais dados ao objeto do evento, usa-se a interface CustomEvent, a qual possui a propriedade detail que pode ser utilizada para fornecer dados customizados.

- -

Por exemplo, o evento pode ser criado da seguinte forma:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Isso permitirá que você acesse dados customizados no listener do evento:

- -
function eventHandler(e) {
-  console.log('The time is: ' + e.detail);
-}
-
- -

A forma antiga

- -

A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:

- -
// Cria o evento.
-var event = document.createEvent('Event');
-
-// Define que o nome do evento é 'build'.
-event.initEvent('build', true, true);
-
-// Ouve pelo evento.
-elem.addEventListener('build', function (e) {
-  // e.target é igual a elem, neste caso
-}, false);
-
-// O alvo do evento pode ser qualquer instância de Element ou EventTarget.
-elem.dispatchEvent(event);
-
-
- -

Disparando eventos nativos

- -

Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. Veja o exemplo em ação.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-
-  if (cancelled) {
-    // Um listener invocou o método preventDefault.
-    alert("Cancelado");
-  } else {
-    // Nenhum listener invocou o método preventDefault.
-    alert("Não cancelado");
-  }
-}
- -

Compatibilidade entre navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
construtor Event()1511{{CompatVersionUnknown}}1111.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

Veja também

- - diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 6e5c5df487..2e9994307f 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -453,10 +453,12 @@ /ru/docs/Web/API/NonDocumentTypeChildNode/NonDocumentTypeChildNode.nextElementSibling /ru/docs/Web/API/Element/nextElementSibling /ru/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling /ru/docs/Web/API/Element/nextElementSibling /ru/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling /ru/docs/Web/API/Element/previousElementSibling +/ru/docs/Web/API/ParentNode/append /ru/docs/orphaned/Web/API/ParentNode/append /ru/docs/Web/API/ParentNode/childElementCount /ru/docs/Web/API/Element/childElementCount /ru/docs/Web/API/ParentNode/children /ru/docs/orphaned/Web/API/ParentNode/children /ru/docs/Web/API/ParentNode/firstElementChild /ru/docs/orphaned/Web/API/ParentNode/firstElementChild /ru/docs/Web/API/ParentNode/lastElementChild /ru/docs/orphaned/Web/API/ParentNode/lastElementChild +/ru/docs/Web/API/ParentNode/prepend /ru/docs/orphaned/Web/API/ParentNode/prepend /ru/docs/Web/API/PositionError /ru/docs/Web/API/GeolocationPositionError /ru/docs/Web/API/Push_API/Using_the_Push_API /ru/docs/conflicting/Web/API/Push_API /ru/docs/Web/API/RandomSource /ru/docs/conflicting/Web/API/Crypto/getRandomValues @@ -598,8 +600,9 @@ /ru/docs/Web/Guide/CSS/Using_multi-column_layouts /ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ru/docs/Web/Guide/CSS/Visual_formatting_model /ru/docs/Web/CSS/Visual_formatting_model /ru/docs/Web/Guide/CSS/ispolzovanie_css_animatciy /ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/ru/docs/Web/Guide/Events/Creating_and_triggering_events /ru/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /ru/docs/Web/Guide/Events/Media_events /ru/docs/orphaned/Web/Guide/Events/Media_events -/ru/docs/Web/Guide/Events/Создание_и_вызов_событий /ru/docs/Web/Guide/Events/Creating_and_triggering_events +/ru/docs/Web/Guide/Events/Создание_и_вызов_событий /ru/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /ru/docs/Web/Guide/HTML /ru/docs/Learn/HTML /ru/docs/Web/Guide/HTML/Canvas_tutorial /ru/docs/Web/API/Canvas_API/Tutorial /ru/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage /ru/docs/Web/API/Canvas_API/Tutorial/Basic_usage diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index a4231ddeba..a2df374b41 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -6819,22 +6819,6 @@ "fscholz" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T22:10:43.295Z", - "contributors": [ - "7nik", - "chrisdavidmills", - "KonstantinBuza", - "madebydima" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:20:07.127Z", - "contributors": [ - "RenJeka", - "pronskiy" - ] - }, "Web/API/PaymentRequest": { "modified": "2020-10-15T22:32:45.030Z", "contributors": [ @@ -22409,18 +22393,6 @@ "ViT09" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2020-10-15T21:31:20.093Z", - "contributors": [ - "YozhEzhi", - "leann-fraoigh", - "Solant", - "bagau", - "pk.prog", - "lazyexpert", - "YuryT" - ] - }, "Web/API/HTML_Drag_and_Drop_API/Drag_operations": { "modified": "2020-02-05T06:07:31.464Z", "contributors": [ @@ -25988,5 +25960,33 @@ "Yialo", "Waakym" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T22:10:43.295Z", + "contributors": [ + "7nik", + "chrisdavidmills", + "KonstantinBuza", + "madebydima" + ] + }, + "orphaned/Web/API/ParentNode/prepend": { + "modified": "2020-10-15T22:20:07.127Z", + "contributors": [ + "RenJeka", + "pronskiy" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2020-10-15T21:31:20.093Z", + "contributors": [ + "YozhEzhi", + "leann-fraoigh", + "Solant", + "bagau", + "pk.prog", + "lazyexpert", + "YuryT" + ] } } \ No newline at end of file diff --git a/files/ru/orphaned/web/api/parentnode/append/index.html b/files/ru/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..e35894dd86 --- /dev/null +++ b/files/ru/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,135 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

Метод ParentNode.append добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) ParentNode. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.

+ +

Отличия от {{domxref("Node.appendChild()")}}:

+ + + +

Синтаксис

+ +
[Throws, Unscopable]
+void ParentNode.append((Node или DOMString)... nodes);
+
+ +

Параметры

+ +
+
nodes
+
Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.
+
+ +

Исключения

+ + + +

Примеры

+ +

Добавление элемента

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Добавление строки

+ +
var parent = document.createElement("div");
+parent.append("Любой текст");
+
+console.log(parent.textContent); // "Любой текст"
+ +

Добавление элемента или строки

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Любой текст", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Любой текст", <p> ]
+ +

ParentNode.append() не имеет области видимости

+ +

Метод append() не имеет области видимости с директивой with. Больше информации в {{jsxref("Symbol.unscopables")}}.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Полифил

+ +

Вы можете использовать полифил для метода append() в Internet Explorer 9 и выше:

+ +
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Спецификация

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

Смотрите также

+ + diff --git a/files/ru/orphaned/web/api/parentnode/prepend/index.html b/files/ru/orphaned/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..489d85a390 --- /dev/null +++ b/files/ru/orphaned/web/api/parentnode/prepend/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.prepend() +slug: orphaned/Web/API/ParentNode/prepend +translation_of: Web/API/ParentNode/prepend +original_slug: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

Метод ParentNode.prepend() вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.

+ +

Синтаксис

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

Параметры

+ +
+
nodesToPrepend
+
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.
+
+ +

Возвращаемое значение

+ +

undefined.

+ +

Исключения

+ + + +

Примеры

+ +

Добавление элемента в начало

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Добавление текста в начало

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Добавление элемента и текста

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() не имеет области видимости

+ +

Метод prepend() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Полифил

+ +

Вы можете использовать полифил, если метод prepend() не доступный:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Спецификация

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Поддержка браузерами

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

Смотрите также

+ + diff --git a/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..8744c80e01 --- /dev/null +++ b/files/ru/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,93 @@ +--- +title: Создание и вызов событий +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - DOM + - JavaScript + - events + - события +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют искусственными событиями, по отношению к событиям, производимым браузером.

+ +

Создание собственных событий

+ +

События могут быть созданы с помощью  конструктора Event:

+ +
var event = new Event('build');
+
+// Подписываемся на событие
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Вызываем событие
+elem.dispatchEvent(event);
+ +

Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже "Старомодный способ".

+ +

Добавление пользовательских данных – CustomEvent()

+ +

Чтобы добавить больше данных к объекту event, существует интерфейс CustomEvent, и вы можете использовать свойство detail, чтобы передать собственные данные. Например, событие может быть создано так:

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

Это позволит вам получить доступ к дополнительным данным в обработчике:

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

Старомодный способ

+ +

Старый способ создать событие использует API в стиле Java. Пример:

+ +
// Создание события
+var event = document.createEvent('Event');
+
+// Назначить имя событию
+event.initEvent('build', true, true);
+
+// Слушаем событие
+document.addEventListener('build', function (e) {
+  // e.target соответствует объекту document
+}, false);
+
+// target события может быть любой элемент
+document.dispatchEvent(event);
+
+
+ +

Вызов встроенных событий

+ +

Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. Просмотр действующих примеров.

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}
+ +

Совместимость с браузерами

+ +

{{Compat("api.Event.Event")}}

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/append/index.html b/files/ru/web/api/parentnode/append/index.html deleted file mode 100644 index fc532f624f..0000000000 --- a/files/ru/web/api/parentnode/append/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -translation_of: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}} {{SeeCompatTable}}
- -

Метод ParentNode.append добавляет набор объектов {{domxref("Node")}} или {{domxref("DOMString")}} в конец (после последнего потомка) ParentNode. {{domxref("DOMString")}} объекты добавляются как {{domxref("Text")}}.

- -

Отличия от {{domxref("Node.appendChild()")}}:

- - - -

Синтаксис

- -
[Throws, Unscopable]
-void ParentNode.append((Node или DOMString)... nodes);
-
- -

Параметры

- -
-
nodes
-
Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.
-
- -

Исключения

- - - -

Примеры

- -

Добавление элемента

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

Добавление строки

- -
var parent = document.createElement("div");
-parent.append("Любой текст");
-
-console.log(parent.textContent); // "Любой текст"
- -

Добавление элемента или строки

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Любой текст", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Любой текст", <p> ]
- -

ParentNode.append() не имеет области видимости

- -

Метод append() не имеет области видимости с директивой with. Больше информации в {{jsxref("Symbol.unscopables")}}.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Полифил

- -

Вы можете использовать полифил для метода append() в Internet Explorer 9 и выше:

- -
// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Спецификация

- - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Поддержка браузерами

- - - -

{{Compat("api.ParentNode.append")}}

- -

Смотрите также

- - diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html deleted file mode 100644 index 6360b0b621..0000000000 --- a/files/ru/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -translation_of: Web/API/ParentNode/prepend ---- -
{{APIRef("DOM")}}
- -

Метод ParentNode.prepend() вставляет множество объектов {{domxref("Node")}} или {{domxref("DOMString")}} в начало (перед первым потомком) {{domxref("ParentNode")}}. Объекты {{domxref("DOMString")}} вставляются как {{domxref("Text")}}.

- -

Синтаксис

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

Параметры

- -
-
nodesToPrepend
-
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определён либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("Text")}}.
-
- -

Возвращаемое значение

- -

undefined.

- -

Исключения

- - - -

Примеры

- -

Добавление элемента в начало

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

Добавление текста в начало

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Добавление элемента и текста

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() не имеет области видимости

- -

Метод prepend() не входит в область видимости оператора with. Смотрите {{jsxref("Symbol.unscopables")}} для детальной информации.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Полифил

- -

Вы можете использовать полифил, если метод prepend() не доступный:

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

Спецификация

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

Поддержка браузерами

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

Смотрите также

- - diff --git a/files/ru/web/guide/events/creating_and_triggering_events/index.html b/files/ru/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index dac765ecda..0000000000 --- a/files/ru/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Создание и вызов событий -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - DOM - - JavaScript - - events - - события -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Создание_и_вызов_событий ---- -

Эта статья демонстрирует, как создавать и вызывать пользовательские DOM-события. Такие события часто называют искусственными событиями, по отношению к событиям, производимым браузером.

- -

Создание собственных событий

- -

События могут быть созданы с помощью  конструктора Event:

- -
var event = new Event('build');
-
-// Подписываемся на событие
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Вызываем событие
-elem.dispatchEvent(event);
- -

Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже "Старомодный способ".

- -

Добавление пользовательских данных – CustomEvent()

- -

Чтобы добавить больше данных к объекту event, существует интерфейс CustomEvent, и вы можете использовать свойство detail, чтобы передать собственные данные. Например, событие может быть создано так:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

Это позволит вам получить доступ к дополнительным данным в обработчике:

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

Старомодный способ

- -

Старый способ создать событие использует API в стиле Java. Пример:

- -
// Создание события
-var event = document.createEvent('Event');
-
-// Назначить имя событию
-event.initEvent('build', true, true);
-
-// Слушаем событие
-document.addEventListener('build', function (e) {
-  // e.target соответствует объекту document
-}, false);
-
-// target события может быть любой элемент
-document.dispatchEvent(event);
-
-
- -

Вызов встроенных событий

- -

Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. Просмотр действующих примеров.

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    // A handler called preventDefault.
-    alert("canceled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not canceled");
-  }
-}
- -

Совместимость с браузерами

- -

{{Compat("api.Event.Event")}}

- -

Смотрите также

- - diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 5b42e7ce28..76db9cbba2 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1728,10 +1728,12 @@ /zh-CN/docs/Web/API/ParentNode.children /zh-CN/docs/orphaned/Web/API/ParentNode/children /zh-CN/docs/Web/API/ParentNode.firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild /zh-CN/docs/Web/API/ParentNode.lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild +/zh-CN/docs/Web/API/ParentNode/append /zh-CN/docs/orphaned/Web/API/ParentNode/append /zh-CN/docs/Web/API/ParentNode/childElementCount /zh-CN/docs/Web/API/Element/childElementCount /zh-CN/docs/Web/API/ParentNode/children /zh-CN/docs/orphaned/Web/API/ParentNode/children /zh-CN/docs/Web/API/ParentNode/firstElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/firstElementChild /zh-CN/docs/Web/API/ParentNode/lastElementChild /zh-CN/docs/orphaned/Web/API/ParentNode/lastElementChild +/zh-CN/docs/Web/API/ParentNode/prepend /zh-CN/docs/orphaned/Web/API/ParentNode/prepend /zh-CN/docs/Web/API/Performance.now() /zh-CN/docs/Web/API/Performance/now /zh-CN/docs/Web/API/Performance/内存 /zh-CN/docs/Web/API/Performance/memory /zh-CN/docs/Web/API/Position /zh-CN/docs/Web/API/GeolocationPosition @@ -2262,6 +2264,7 @@ /zh-CN/docs/Web/Guide/CSS/媒体查询 /zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Guide/DOM /zh-CN/docs/conflicting/Web/API/Document_Object_Model_dd00a71ceceac547ab464128db6bd8ef /zh-CN/docs/Web/Guide/DOM/Whitespace_in_the_DOM /zh-CN/docs/Web/API/Document_Object_Model/Whitespace +/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events /zh-CN/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /zh-CN/docs/Web/Guide/Events/Media_events /zh-CN/docs/orphaned/Web/Guide/Events/Media_events /zh-CN/docs/Web/Guide/Events/Mutation_events /zh-CN/docs/orphaned/Web/Guide/Events/Mutation_events /zh-CN/docs/Web/Guide/Events/Touch_events /zh-CN/docs/Web/API/Touch_events diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 917102ab9b..778081b0d1 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -16785,23 +16785,6 @@ "AlexChao" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-10-15T21:51:11.120Z", - "contributors": [ - "Ende93", - "zhangchen", - "xgqfrms-GitHub", - "ziyunfei" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-10-15T21:52:00.307Z", - "contributors": [ - "Ende93", - "zhuangyin", - "maicss" - ] - }, "Web/API/ParentNode/querySelector": { "modified": "2020-10-15T22:11:37.961Z", "contributors": [ @@ -28803,24 +28786,6 @@ "Jeremie" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2020-05-27T10:29:01.846Z", - "contributors": [ - "Carllllo", - "xingleizhao", - "but0n", - "zhangchen", - "LuSitong", - "Iamxiaozhu", - "ucev", - "xgqfrms-GitHub", - "ZhengYinBo", - "carllx", - "timwangdev", - "FredWe", - "ReyCG_sub" - ] - }, "Web/Guide/Events/Event_handlers": { "modified": "2019-03-23T23:20:11.825Z", "contributors": [ @@ -50798,5 +50763,40 @@ "khalid32", "ziyunfei" ] + }, + "orphaned/Web/API/ParentNode/append": { + "modified": "2020-10-15T21:51:11.120Z", + "contributors": [ + "Ende93", + "zhangchen", + "xgqfrms-GitHub", + "ziyunfei" + ] + }, + "orphaned/Web/API/ParentNode/prepend": { + "modified": "2020-10-15T21:52:00.307Z", + "contributors": [ + "Ende93", + "zhuangyin", + "maicss" + ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2020-05-27T10:29:01.846Z", + "contributors": [ + "Carllllo", + "xingleizhao", + "but0n", + "zhangchen", + "LuSitong", + "Iamxiaozhu", + "ucev", + "xgqfrms-GitHub", + "ZhengYinBo", + "carllx", + "timwangdev", + "FredWe", + "ReyCG_sub" + ] } } \ No newline at end of file diff --git a/files/zh-cn/orphaned/web/api/parentnode/append/index.html b/files/zh-cn/orphaned/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..6f06f7a420 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/parentnode/append/index.html @@ -0,0 +1,147 @@ +--- +title: ParentNode.append() +slug: orphaned/Web/API/ParentNode/append +tags: + - API + - DOM + - Node + - ParentNode + - Reference +translation_of: Web/API/ParentNode/append +original_slug: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +
 ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。
+ +
被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。
+ +
+ +
与 {{domxref("Node.appendChild()")}} 的差异：
+ +
+ + + +

语法

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
nodes
+
一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。
+
+ +

异常

+ + + +

示例

+ +

插入一个元素节点

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

插入文本

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

插入一个节点，同时插入一些文本

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() 方法在 with 语句中不生效

+ +

为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

下面的 Polyfill 只支持到 IE 9  及以上：

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html b/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..c2779973b0 --- /dev/null +++ b/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html @@ -0,0 +1,135 @@ +--- +title: ParentNode.prepend() +slug: orphaned/Web/API/ParentNode/prepend +tags: + - API + - DOM + - Method + - Node + - ParentNode + - Reference + - prepend + - 方法 +translation_of: Web/API/ParentNode/prepend +original_slug: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

ParentNode.prepend 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。

+ +

语法

+ +
ParentNode.prepend((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
nodes
+
要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。
+
+ +

返回值

+ +

undefined.

+ +

错误

+ + + +

例子

+ +

Prepending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Prepending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() is unscopable

+ +

prepend()不能在with语句内使用，详情参考{{jsxref("Symbol.unscopables")}}。

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Polyfill

+ +

使用下面的代码在IE9或更高版本中模拟prepend()方法：

+ +
// from: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+    arr.forEach(function (item) {
+        item.prepend = item.prepend || function () {
+            var argArr = Array.prototype.slice.call(arguments),
+                docFrag = document.createDocumentFragment();
+
+            argArr.forEach(function (argItem) {
+                var isNode = argItem instanceof Node;
+                docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+            });
+
+            this.insertBefore(docFrag, this.firstChild);
+        };
+    });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

兼容性

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

See also

+ + diff --git a/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..dbc0f65c1f --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,137 @@ +--- +title: 创建和触发 events +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - events +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

本文演示了如何创建和分派DOM事件。这些事件通常称为合成事件，而不是浏览器本身触发的事件。

+ +

创建自定义事件

+ +

Events 可以使用 Event 构造函数创建如下：

+ +
var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

上述代码使用了 EventTarget.dispatchEvent() 方法。

+ +

绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 过时的方式  一节。

+ +

添加自定义数据 – CustomEvent()

+ +

要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。
+ 例如，event 可以创建如下：

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

下面的代码允许你在事件监听器中访问更多的数据：

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

过时的方式

+ +

早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：

+ +
// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+ +

事件冒泡

+ +

通常需要从子元素触发事件，并让祖先捕获它：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+ +

动态创建和派发事件

+ +

元素可以侦听尚未创建的事件：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+ + + +

触发内置事件

+ +

下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。参见这个动态示例

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/parentnode/append/index.html b/files/zh-cn/web/api/parentnode/append/index.html deleted file mode 100644 index 247291f59e..0000000000 --- a/files/zh-cn/web/api/parentnode/append/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -tags: - - API - - DOM - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append ---- -
{{APIRef("DOM")}}
- -
 ParentNode.append 方法在 ParentNode的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。
- -
被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。
- -
- -
与 {{domxref("Node.appendChild()")}} 的差异：
- -
- - - -

语法

- -
[Throws, Unscopable]
-void ParentNode.append((Node or DOMString)... nodes);
-
- -

参数

- -
-
nodes
-
一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。
-
- -

异常

- - - -

示例

- -

插入一个元素节点

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append(p);
-
-console.log(parent.childNodes); // NodeList [ <p> ]
-
- -

插入文本

- -
var parent = document.createElement("div");
-parent.append("Some text");
-
-console.log(parent.textContent); // "Some text"
- -

插入一个节点，同时插入一些文本

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.append("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() 方法在 with 语句中不生效

- -

为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。

- -
var parent = document.createElement("div");
-
-with(parent) {
-  append("foo");
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

下面的 Polyfill 只支持到 IE 9  及以上：

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

规范

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

浏览器兼容

- - - -

{{Compat("api.ParentNode.append")}}

- -

相关链接

- - diff --git a/files/zh-cn/web/api/parentnode/prepend/index.html b/files/zh-cn/web/api/parentnode/prepend/index.html deleted file mode 100644 index f5e1a9fb55..0000000000 --- a/files/zh-cn/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend - - 方法 -translation_of: Web/API/ParentNode/prepend ---- -
{{APIRef("DOM")}}
- -

ParentNode.prepend 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。

- -

语法

- -
ParentNode.prepend((Node or DOMString)... nodes);
-
- -

参数

- -
-
nodes
-
要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。
-
- -

返回值

- -

undefined.

- -

错误

- - - -

例子

- -

Prepending an element

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

Prepending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Appending an element and text

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() is unscopable

- -

prepend()不能在with语句内使用，详情参考{{jsxref("Symbol.unscopables")}}。

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

使用下面的代码在IE9或更高版本中模拟prepend()方法：

- -
// from: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-    arr.forEach(function (item) {
-        item.prepend = item.prepend || function () {
-            var argArr = Array.prototype.slice.call(arguments),
-                docFrag = document.createDocumentFragment();
-
-            argArr.forEach(function (argItem) {
-                var isNode = argItem instanceof Node;
-                docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-            });
-
-            this.insertBefore(docFrag, this.firstChild);
-        };
-    });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

说明

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
- -

兼容性

- - - -

{{Compat("api.ParentNode.prepend")}}

- -

See also

- - diff --git a/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html b/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index 65249da219..0000000000 --- a/files/zh-cn/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: 创建和触发 events -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - events -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

本文演示了如何创建和分派DOM事件。这些事件通常称为合成事件，而不是浏览器本身触发的事件。

- -

创建自定义事件

- -

Events 可以使用 Event 构造函数创建如下：

- -
var event = new Event('build');
-
-// Listen for the event.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Dispatch the event.
-elem.dispatchEvent(event);
- -

上述代码使用了 EventTarget.dispatchEvent() 方法。

- -

绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 过时的方式  一节。

- -

添加自定义数据 – CustomEvent()

- -

要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。
- 例如，event 可以创建如下：

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

下面的代码允许你在事件监听器中访问更多的数据：

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

过时的方式

- -

早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：

- -
// Create the event.
-var event = document.createEvent('Event');
-
-// Define that the event name is 'build'.
-event.initEvent('build', true, true);
-
-// Listen for the event.
-document.addEventListener('build', function (e) {
-  // e.target matches document from above
-}, false);
-
-// target can be any Element or other EventTarget.
-document.dispatchEvent(event);
-
- -

事件冒泡

- -

通常需要从子元素触发事件，并让祖先捕获它：

- -
<form>
-  <textarea></textarea>
-</form>
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
-const eventAwesome = new CustomEvent('awesome', {
-  bubbles: true,
-  detail: { text: () => textarea.value }
-});
-
-// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
-textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
- -

动态创建和派发事件

- -

元素可以侦听尚未创建的事件：

- -
<form>
-  <textarea></textarea>
-</form>
- -
const form = document.querySelector('form');
-const textarea = document.querySelector('textarea');
-
-form.addEventListener('awesome', e => console.log(e.detail.text()));
-
-textarea.addEventListener('input', function() {
-  // Create and dispatch/trigger an event on the fly
-  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
-  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
-});
- - - -

触发内置事件

- -

下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。参见这个动态示例

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
-  if (cancelled) {
-    // A handler called preventDefault.
-    alert("cancelled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not cancelled");
-  }
-}
-
- -

参见

- - diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 49ffb976ba..9e057c89e9 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -644,6 +644,7 @@ /zh-TW/docs/Web/Guide/DOM /zh-TW/docs/conflicting/Web/API/Document_Object_Model /zh-TW/docs/Web/Guide/DOM/Manipulating_the_browser_history /zh-TW/docs/Web/API/History_API /zh-TW/docs/Web/Guide/DOM/Using_full_screen_mode /zh-TW/docs/Web/API/Fullscreen_API +/zh-TW/docs/Web/Guide/Events/Creating_and_triggering_events /zh-TW/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /zh-TW/docs/Web/Guide/HTML /zh-TW/docs/Learn/HTML /zh-TW/docs/Web/Guide/HTML/Canvas_tutorial /zh-TW/docs/Web/API/Canvas_API/Tutorial /zh-TW/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors /zh-TW/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index e287862822..e1c57a02d0 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -5291,13 +5291,6 @@ "gportioli" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-23T22:48:01.128Z", - "contributors": [ - "jackblackevo", - "Shiyou" - ] - }, "Web/Guide/Events/Event_handlers": { "modified": "2020-05-13T00:05:39.122Z", "contributors": [ @@ -9152,5 +9145,12 @@ "contributors": [ "ianchen0119" ] + }, + "orphaned/Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-23T22:48:01.128Z", + "contributors": [ + "jackblackevo", + "Shiyou" + ] } } \ No newline at end of file diff --git a/files/zh-tw/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/zh-tw/orphaned/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..8bd616a73d --- /dev/null +++ b/files/zh-tw/orphaned/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,145 @@ +--- +title: 建立或觸發事件 +slug: orphaned/Web/Guide/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - 事件 +translation_of: Web/Guide/Events/Creating_and_triggering_events +original_slug: Web/Guide/Events/Creating_and_triggering_events +--- +

本文介紹如何建立和觸發事件。

+ +

建立自定義事件

+ +

事件可以用 {{domxref("Event")}} constructor 建立，如下所示：

+ +
var event = new Event('build');
+
+// 監聽事件
+elem.addEventListener('build', function (e) { ... }, false);
+
+// 觸發事件
+elem.dispatchEvent(event);
+ +

除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《早期的做法》。

+ +

增加自定義的資料－－CustomEvent()

+ +

要在事件的 object 追加其他資料，能使用 {{domxref("CustomEvent")}} 介面。它有 detail 屬性，可以用來傳送自訂資料。
+ 舉例來說，可以以下面方式建立事件：

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

它可以讓你傳送自訂資料到事件的監聽器：

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

早期的做法

+ +

早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：

+ +
// 建立事件
+var event = document.createEvent('Event');
+
+// 設定事件名稱為 “build” 。
+event.initEvent('build', true, true);
+
+// 監聽事件
+elem.addEventListener('build', function (e) {
+  // e.target matches elem
+}, false);
+
+// 事件對象可以是任一 HTML 元素或是 EventTarget 。
+elem.dispatchEvent(event);
+
+
+ +

觸發自定義事件

+ +

下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 觀看實例。

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}
+ +

瀏覽器的支援度

+ +

 

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Event() constructor1511{{CompatVersionUnknown}}{{CompatNo}}11.606
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
+
+ +

延伸閱讀

+ + diff --git a/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html b/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index c198adaa5e..0000000000 --- a/files/zh-tw/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: 建立或觸發事件 -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - Advanced - - DOM - - Guide - - JavaScript - - 事件 -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

本文介紹如何建立和觸發事件。

- -

建立自定義事件

- -

事件可以用 {{domxref("Event")}} constructor 建立，如下所示：

- -
var event = new Event('build');
-
-// 監聽事件
-elem.addEventListener('build', function (e) { ... }, false);
-
-// 觸發事件
-elem.dispatchEvent(event);
- -

除了 Internet Explorer 以外，大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法，可以參考段落《早期的做法》。

- -

增加自定義的資料－－CustomEvent()

- -

要在事件的 object 追加其他資料，能使用 {{domxref("CustomEvent")}} 介面。它有 detail 屬性，可以用來傳送自訂資料。
- 舉例來說，可以以下面方式建立事件：

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

它可以讓你傳送自訂資料到事件的監聽器：

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

早期的做法

- -

早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子：

- -
// 建立事件
-var event = document.createEvent('Event');
-
-// 設定事件名稱為 “build” 。
-event.initEvent('build', true, true);
-
-// 監聽事件
-elem.addEventListener('build', function (e) {
-  // e.target matches elem
-}, false);
-
-// 事件對象可以是任一 HTML 元素或是 EventTarget 。
-elem.dispatchEvent(event);
-
-
- -

觸發自定義事件

- -

下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊（換言之，讓程式執行一次「點擊事件」。）。 觀看實例。

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    // A handler called preventDefault.
-    alert("canceled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not canceled");
-  }
-}
- -

瀏覽器的支援度

- -

 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari (WebKit)
Event() constructor1511{{CompatVersionUnknown}}{{CompatNo}}11.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

延伸閱讀

- - -- cgit v1.2.3-54-g00ecf