From 78fde80b73594eab872a2f4d14b445c4a4c68cff Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 13 Jul 2021 02:38:02 +0900 Subject: Web/Guide/Events/Creating_and_triggering_events を更新 (#1372) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Web/Guide/Events/Creating_and_triggering_events を更新 - conflicting 版は古いので削除 - 2021/04/23 時点の英語版に同期 * 追加修正 * 追加修正 * リダイレクトを修正 --- .../creating_and_triggering_events/index.html | 41 +++++++++++----------- 1 file changed, 21 insertions(+), 20 deletions(-) (limited to 'files/ja/web/events') diff --git a/files/ja/web/events/creating_and_triggering_events/index.html b/files/ja/web/events/creating_and_triggering_events/index.html index 8543bc7c77..cfa49f9c46 100644 --- a/files/ja/web/events/creating_and_triggering_events/index.html +++ b/files/ja/web/events/creating_and_triggering_events/index.html @@ -13,11 +13,11 @@ original_slug: Web/Events/Creating_and_triggering_events ---

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

-

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

+

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

-

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

+

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

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

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

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

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

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

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

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

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

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

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

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

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

 
@@ -44,12 +44,12 @@ elem.dispatchEvent(event);
} -

古い方法

+

古い方法

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

// イベントの作成
-var event = document.createEvent('Event');
+const event = document.createEvent('Event');
 
 // イベントの名前を 'build' と定義する
 event.initEvent('build', true, true);
@@ -64,7 +64,7 @@ elem.dispatchEvent(event);
-

イベントのバブリング

+

イベントのバブリング

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

@@ -89,7 +89,7 @@ form.addEventListener('awesome', e => console.log(e.detail.text())); textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome)); -

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

+

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

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

@@ -110,18 +110,19 @@ textarea.addEventListener('input', function() { }); -

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

+

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

-

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

+

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

function simulateClick() {
-  var event = new MouseEvent('click', {
+  const event = new MouseEvent('click', {
     view: window,
     bubbles: true,
     cancelable: true
   });
-  var cb = document.getElementById('checkbox');
-  var cancelled = !cb.dispatchEvent(event);
+  const cb = document.getElementById('checkbox');
+  const cancelled = !cb.dispatchEvent(event);
+
   if (cancelled) {
     // A handler called preventDefault.
     alert("cancelled");
@@ -131,7 +132,7 @@ textarea.addEventListener('input', function() {
   }
 }
-

関連情報

+

関連情報