files/zh-cn/web/api/htmlelement/change_event/index.html


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

---
title: change
slug: Web/API/HTMLElement/change_event
tags:
  - Change
  - HTML
  - HTML DOM
  - HTMLElement
  - change vs. input
  - 事件
  - 参考
translation_of: Web/API/HTMLElement/change_event
original_slug: Web/Events/change
---
<p>{{APIRef}}</p>

<p>当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，<code>change</code> 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，<code>change</code> 事件并不是每次元素的 <code>value</code> 改变时都会触发。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">冒泡</th>
   <td>是</td>
  </tr>
  <tr>
   <th scope="row">可取消</th>
   <td>否</td>
  </tr>
  <tr>
   <th scope="row">接口</th>
   <td>{{domxref("Event")}}</td>
  </tr>
  <tr>
   <th scope="row">事件处理程序属性</th>
   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
  </tr>
 </tbody>
</table>

<p>基于表单元素的类型和用户对标签的操作的不同，<code>change</code> 事件触发的时机也不同：</p>

<ul>
 <li>当元素是 <code>:checked</code> 状态时（通过点击或者使用键盘），见于 <code>{{HTMLElement('input/radio', '&lt;input type="radio"&gt;')}}</code> 和 <code>{{HTMLElement('input/checkbox', '&lt;input type="checkbox"&gt;')}}</code>；</li>
 <li>当用户显式提交改变时（例如：点击了 {{HTMLElement("select")}}中的一个选项，从 <code>{{HTMLElement('input/date', '&lt;input type="date"&gt;')}}</code> 标签选择了一个日期，通过 <code>{{HTMLElement('input/file', '&lt;input type="file"&gt;')}}</code> 标签上传了一个文件等）；</li>
 <li>当标签的值被修改并且失去焦点后，但未提交时（例如：对{{HTMLElement("textarea")}} 或者 <code>{{HTMLElement('input/text', '&lt;input type="text"&gt;')}}</code>的值进行编辑后）。</li>
</ul>

<h2 id="示例">示例</h2>

<h3 id="&lt;select>_元素">&lt;select&gt; 元素</h3>

<h4 id="HTML">HTML</h4>

<pre class="notranslate">&lt;label&gt;Choose an ice cream flavor:
  &lt;select class="ice-cream" name="ice-cream"&gt;
    &lt;option value=""&gt;Select One …&lt;/option&gt;
    &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
    &lt;option value="sardine"&gt;Sardine&lt;/option&gt;
    &lt;option value="vanilla"&gt;Vanilla&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;

&lt;div class="result"&gt;&lt;/div&gt;</pre>

<pre class="notranslate">body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}
</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="notranslate">const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) =&gt; {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});
</pre>

<h4 id="结果">结果</h4>


<h3 id="文本输入元素">文本输入元素</h3>

<p>对于一些元素，包括 <code>&lt;input type="text"&gt;</code>，<code>change</code> 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="notranslate">&lt;input placeholder="Enter some text" name="name"/&gt;
&lt;p id="log"&gt;&lt;/p&gt;</pre>

<h4 id="JavaScript_2">JavaScript</h4>

<pre class="notranslate">const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}</pre>

<h4 id="结果_2">结果</h4>


<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>

<p>对于一些特定类型的交互是否要触发 <code>change</code> 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 <code>change</code> 事件，直到用户按下 Enter 键或将焦点从 <code>&lt;select&gt;</code> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。</p>

<h2 id="参见">参见</h2>

<p>{{domxref("NetworkInformation.connection")}} fires the <code>change</code> event when the connection information changes.</p>