1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
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>
<h2 id="Creating_custom_events">カスタムイベントを作成する</h2>
<p>イベントは、次のように <a href="/ja/docs/Web/API/Event"><code>Event</code></a> コンストラクターを使用して作成できます。</p>
<pre class="brush: 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>
<p>このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です)。もっと冗長的なアプローチ (Internet Explorer で動作するもの) は、下記の<a href="#the_old-fashioned_way">古い方法</a>を参照して下さい。</p>
<h3 id="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">const 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">古い方法</h3>
<p>イベントを作成する古いアプローチでは、 Java に触発された API が使用されます。以下に例を示します。</p>
<pre class="brush: js">// イベントの作成
const event = document.createEvent('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">イベントのバブリング</h3>
<p>子要素からイベントを起動させ、祖先要素がそれを、任意でデータも、受け取りたい場合がよくあります。</p>
<pre class="brush: html"><form>
<textarea></textarea>
</form>
</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: () => textarea.value }
});
// フォームイベントが "awesome" カスタムイベントを待ち受けし、渡されたものの text() メソッドをコンソールに出力する
form.addEventListener('awesome', e => console.log(e.detail.text()));
// ユーザー型の場合、 form 内の textarea は発生させるイベントを起動・処理し、それを開始点として使用する
textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
</pre>
<h3 id="Creating_and_dispatching_events_dynamically">イベントの動的な生成と処理</h3>
<p>要素はまだ作成されていないイベントを待ち受けすることができます。</p>
<pre class="brush: html"><form>
<textarea></textarea>
</form>
</pre>
<pre class="brush: js">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 } }))
});
</pre>
<h2 id="Triggering_built-in_events">ビルトインイベントの起動</h2>
<p>この例では、 DOM メソッドを使用してチェックボックスでクリック (プログラムでクリックイベントを生成する) をシミュレートする方法を示します。<a href="https://media.prod.mdn.mozit.cloud/samples/domref/dispatchEvent.html">デモを見る</a>。</p>
<pre class="brush: js">function simulateClick() {
const event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
const cb = document.getElementById('checkbox');
const 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">関連情報</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>
|
