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
|
---
title: 创建和触发 events
slug: Web/Events/Creating_and_triggering_events
translation_of: Web/Events/Creating_and_triggering_events
tags:
- Advanced
- DOM
- Guide
- JavaScript
- NeedsContent
- events
---
<p>本文演示了如何创建和分派DOM事件。这些事件通常称为<strong>合成事件</strong>，而不是浏览器本身触发的事件。</p>
<h2 id="创建自定义事件">创建自定义事件</h2>
<p>Events 可以使用 <a href="/zh/docs/Web/API/Event"><code>Event</code></a> 构造函数创建如下：</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>上述代码使用了 <a href="/zh-CN/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a> 方法。</p>
<p><span style="line-height: 1.5;">绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 </span><a href="#The_old-fashioned_way" style="line-height: 1.5;" title="#过时的方式">过时的方式</a><span style="line-height: 1.5;"> 一节。</span></p>
<h3 id="添加自定义数据_–_CustomEvent">添加自定义数据 – CustomEvent()</h3>
<p>要向事件对象添加更多数据，可以使用 <a href="/zh-CN/docs/Web/API/CustomEvent">CustomEvent</a> 接口，detail 属性可用于传递自定义数据。<br>
例如，event 可以创建如下：</p>
<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre>
<p><span style="line-height: 1.5;">下面的代码允许你在事件监听器中访问更多的数据：</span></p>
<pre class="brush: js">function eventHandler(e) {
log('The time is: ' + e.detail);
}
</pre>
<h3 id="过时的方式">过时的方式</h3>
<p>早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：</p>
<pre class="brush: js">// Create the event.
var event = document.createEvent('Event');
// Define that the event name is 'build'.
event.initEvent('build', true, true);
// Listen for the event.
document.addEventListener('build', function (e) {
// e.target matches document from above
}, false);
// target can be any Element or other EventTarget.
document.dispatchEvent(event);
</pre>
<h3 id="事件冒泡">事件冒泡</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');
// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
const eventAwesome = new CustomEvent('awesome', {
bubbles: true,
detail: { text: () => textarea.value }
});
// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener('awesome', e => console.log(e.detail.text()));
// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));</pre>
<h3 id="动态创建和派发事件">动态创建和派发事件</h3>
<p>元素可以侦听尚未创建的事件：</p>
<pre class="brush: html"><code><form>
<textarea></textarea>
</form></code></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="触发内置事件">触发内置事件</h2>
<p>下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。<a 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="Browser_compatibility" name="Browser_compatibility">参见</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/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>
|
