From 83e350d093b56bb96843f3eca37e4d706451fa71 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 31 Jan 2022 00:15:42 +0900 Subject: 2021/10/14 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../events/creating_and_triggering_events/index.md | 134 +++++++++++---------- 1 file changed, 68 insertions(+), 66 deletions(-) diff --git a/files/ja/web/events/creating_and_triggering_events/index.md b/files/ja/web/events/creating_and_triggering_events/index.md index cfa49f9c46..c2c707ce0a 100644 --- a/files/ja/web/events/creating_and_triggering_events/index.md +++ b/files/ja/web/events/creating_and_triggering_events/index.md @@ -2,53 +2,58 @@ title: イベントの作成と起動 slug: Web/Events/Creating_and_triggering_events tags: - - Advanced + - 上級者 - DOM - - Guide + - ガイド - JavaScript - NeedsContent - - events + - イベント translation_of: Web/Events/Creating_and_triggering_events original_slug: Web/Events/Creating_and_triggering_events --- -

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

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

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

+## カスタムイベントの作成 -

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

+イベントは、次のように [`Event`](/ja/docs/Web/API/Event) コンストラクターを使用して作成できます。 -
const event = new Event('build');
+```js
+const event = new Event('build');
 
 // Listen for the event.
 elem.addEventListener('build', function (e) { /* ... */ }, false);
 
 // Dispatch the event.
-elem.dispatchEvent(event);
- -

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

+elem.dispatchEvent(event); +``` -

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

+上記のコード例は [EventTarget.dispatchEvent()](/ja/docs/Web/API/EventTarget/dispatchEvent) メソッドを使用します。 -

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

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

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

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

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

+イベントオブジェクトにデータを追加するには、[CustomEvent](/ja/docs/Web/API/CustomEvent) インターフェイスが存在し、**detail** プロパティを使用してカスタムデータを渡すことができます。 +たとえば、イベントは次のようにして作成することができます。 -
const event = new CustomEvent('build', { detail: elem.dataset.time });
+```js +const event = new CustomEvent('build', { detail: elem.dataset.time }); +``` -

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

+これにより、イベントリスナー内の追加データにアクセスすることができます。 -
function eventHandler(e) {
+```js
+function eventHandler(e) {
   console.log('The time is: ' + e.detail);
 }
-
+``` -

古い方法

+### 古い方法 -

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

+イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。 -
// イベントの作成
+```js
+/ イベントの作成
 const event = document.createEvent('Event');
 
 // イベントの名前を 'build' と定義する
@@ -61,60 +66,64 @@ elem.addEventListener('build', function (e) {
 
 // 対象が何らかの Element またはその他の EventTarget の場合
 elem.dispatchEvent(event);
+```
 
-
+### イベントのバブリング -

イベントのバブリング

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

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

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

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

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

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

+要素はまだ作成されていないイベントを待ち受けすることができます。 -
<form>
-  <textarea></textarea>
-</form>
-
+```html +
+  +
+``` -
const form = document.querySelector('form');
+```js
+const form = document.querySelector('form');
 const textarea = document.querySelector('textarea');
 
-form.addEventListener('awesome', e => console.log(e.detail.text()));
+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 } }))
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
 });
-
+``` -

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

+### 組み込みイベントの起動 -

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

+この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。[デモを見る](https://media.prod.mdn.mozit.cloud/samples/domref/dispatchEvent.html)。 -
function simulateClick() {
+```js
+function simulateClick() {
   const event = new MouseEvent('click', {
     view: window,
     bubbles: true,
@@ -130,22 +139,15 @@ textarea.addEventListener('input', function() {
     // None of the handlers called preventDefault.
     alert("not cancelled");
   }
-}
- -

関連情報

- - - - +} +``` + +## 関連情報 + +- [CustomEvent()](/ja/docs/Web/API/CustomEvent/CustomEvent) +- {{domxref("document.createEvent()")}} +- {{domxref("Event.initEvent()")}} +- {{domxref("EventTarget.dispatchEvent()")}} +- {{domxref("EventTarget.addEventListener()")}} + + -- cgit v1.2.3-54-g00ecf