unslug zh-cn: move

1 files changed, 124 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlelement/change_event/index.html b/files/zh-cn/web/api/htmlelement/change_event/index.html
new file mode 100644
index 0000000000..6a997fc430
--- /dev/null
+++ b/files/zh-cn/web/api/htmlelement/change_event/index.html
@@ -0,0 +1,124 @@
+---
+title: change
+slug: Web/Events/change
+tags:
+  - Change
+  - HTML
+  - HTML DOM
+  - HTMLElement
+  - change vs. input
+  - 事件
+  - 参考
+translation_of: Web/API/HTMLElement/change_event
+---
+<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>