[CRON] sync translated content

1 files changed, 142 insertions, 0 deletions

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