2021/10/14 時点の英語版に同期

1 files 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
 ---
-<p>この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、<strong>合成イベント</strong>と呼ばれます。</p>
+この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、**合成イベント**と呼ばれます。
 
-<h2 id="Creating_custom_events">カスタムイベントを作成する</h2>
+## カスタムイベントの作成
 
-<p>イベントは、次のように <a href="/ja/docs/Web/API/Event"><code>Event</code></a> コンストラクターを使用して作成できます。</p>
+イベントは、次のように [`Event`](/ja/docs/Web/API/Event) コンストラクターを使用して作成できます。
 
-<pre class="brush: js">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);</pre>
-
-<p>上記のコード例は <a href="/ja/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> メソッドを使用します。</p>
+elem.dispatchEvent(event);
+```
 
-<p>このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の<a href="#the_old-fashioned_way">古い方法</a>を参照して下さい。</p>
+上記のコード例は [EventTarget.dispatchEvent()](/ja/docs/Web/API/EventTarget/dispatchEvent) メソッドを使用します。
 
-<h3 id="Adding_custom_data_–_CustomEvent">カスタムデータの追加 – CustomEvent()</h3>
+このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の[古い方法](#古い方法)を参照して下さい。
 
-<p>イベントオブジェクトにデータを追加するには、<a href="/ja/docs/Web/API/CustomEvent">CustomEvent</a> インターフェイスが存在し、<u><strong>detail</strong></u> プロパティを使用してカスタムデータを渡すことができます。</p>
+### カスタムデータの追加 – CustomEvent()
 
-<p>たとえば、イベントは次のように作成できます。</p>
+イベントオブジェクトにデータを追加するには、[CustomEvent](/ja/docs/Web/API/CustomEvent) インターフェイスが存在し、**detail** プロパティを使用してカスタムデータを渡すことができます。
+たとえば、イベントは次のようにして作成することができます。
 
-<pre class="brush: js">const event = new CustomEvent('build', { detail: elem.dataset.time });</pre>
+```js
+const event = new CustomEvent('build', { detail: elem.dataset.time });
+```
 
-<p>これにより、イベントリスナー内の追加データにアクセスすることができます。</p>
+これにより、イベントリスナー内の追加データにアクセスすることができます。
 
-<pre class="brush: js">function eventHandler(e) {
+```js
+function eventHandler(e) {
   console.log('The time is: ' + e.detail);
 }
-</pre>
+```
 
-<h3 id="The_old-fashioned_way">古い方法</h3>
+### 古い方法
 
-<p>イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。</p>
+イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。
 
-<pre class="brush: js">// イベントの作成
+```js
+/ イベントの作成
 const event = document.createEvent('Event');
 
 // イベントの名前を 'build' と定義する
@@ -61,60 +66,64 @@ elem.addEventListener('build', function (e) {
 
 // 対象が何らかの Element またはその他の EventTarget の場合
 elem.dispatchEvent(event);
+```
 
-</pre>
+### イベントのバブリング
 
-<h3 id="Event_bubbling">イベントのバブリング</h3>
+子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。
 
-<p>子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。</p>
+```html
+<form>
+  <textarea></textarea>
+</form>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;textarea&gt;&lt;/textarea&gt;
-&lt;/form&gt;
-</pre>
-
-<pre class="brush: js">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: () =&gt; textarea.value }
+  detail: { text: () => textarea.value }
 });
 
 // フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
-form.addEventListener('awesome', e =&gt; console.log(e.detail.text()));
+form.addEventListener('awesome', e => console.log(e.detail.text()));
 
 // ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
-textarea.addEventListener('input', e =&gt; e.target.dispatchEvent(eventAwesome));
-</pre>
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+```
 
-<h3 id="Creating_and_dispatching_events_dynamically">イベントの動的な生成と処理</h3>
+### イベントの動的な生成と処理
 
-<p>要素はまだ作成されていないイベントを待ち受けすることができます。</p>
+要素はまだ作成されていないイベントを待ち受けすることができます。
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;textarea&gt;&lt;/textarea&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <textarea></textarea>
+</form>
+```
 
-<pre class="brush: js">const form = document.querySelector('form');
+```js
+const form = document.querySelector('form');
 const textarea = document.querySelector('textarea');
 
-form.addEventListener('awesome', e =&gt; 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: () =&gt; textarea.value } }))
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
 });
-</pre>
+```
 
-<h2 id="Triggering_built-in_events">ビルトインイベントの起動</h2>
+### 組み込みイベントの起動
 
-<p>この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。<a href="https://media.prod.mdn.mozit.cloud/samples/domref/dispatchEvent.html">デモを見る</a>。</p>
+この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。[デモを見る](https://media.prod.mdn.mozit.cloud/samples/domref/dispatchEvent.html)。
 
-<pre class="brush: js">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");
   }
-}</pre>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/CustomEvent/CustomEvent">CustomEvent()</a></li>
- <li>{{domxref("document.createEvent()")}}</li>
- <li>{{domxref("Event.initEvent()")}}</li>
- <li>{{domxref("EventTarget.dispatchEvent()")}}</li>
- <li>{{domxref("EventTarget.addEventListener()")}}</li>
-</ul>
-
-<section id="Quick_links">
-  <ul>
-    <li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベント入門</a></li>
-    <li><a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー (概要)</a></li>
-    <li><a href="/ja/docs/Web/Events">イベントリファレンス</a></li>
-  </ul>
-</section>
+}
+```
+
+## 関連情報
+
+- [CustomEvent()](/ja/docs/Web/API/CustomEvent/CustomEvent)
+- {{domxref("document.createEvent()")}}
+- {{domxref("Event.initEvent()")}}
+- {{domxref("EventTarget.dispatchEvent()")}}
+- {{domxref("EventTarget.addEventListener()")}}
+
+<section id="Quick_links"><ul><li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベント入門</a></li><li><a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー (概要)</a></li><li><a href="/ja/docs/Web/Events">イベントリファレンス</a></li></ul></section>