1 files changed, 158 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/htmlelement/input_event/index.html b/files/zh-cn/web/api/htmlelement/input_event/index.html
new file mode 100644
index 0000000000..f2921d53e2
--- /dev/null
+++ b/files/zh-cn/web/api/htmlelement/input_event/index.html
@@ -0,0 +1,158 @@
+---
+title: input
+slug: Web/API/HTMLElement/input_event
+tags:
+  - HTML DOM
+  - HTMLElement
+  - Input
+  - 事件
+  - 参考
+  - 表单
+  - 输入
+translation_of: Web/API/HTMLElement/input_event
+original_slug: Web/Events/input
+---
+<p>{{APIRef}}</p>
+
+<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时，会触发 <strong><code>input</code></strong> 事件。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles</th>
+   <td>Yes</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface</th>
+   <td>{{DOMxRef("InputEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property</th>
+   <td>{{domxref("GlobalEventHandlers.oninput")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p>
+
+<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>），<code>input</code> 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong> 每当元素的 <code>value</code> 改变，<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。</p>
+</div>
+
+<h2 id="示例">示例</h2>
+
+<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html"><code>&lt;input placeholder="Enter some text" name="name"/&gt;
+&lt;p id="values"&gt;&lt;/p&gt;</code></pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js"><code>const input = document.querySelector('input');
+const log = document.getElementById('values');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}</code>
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
+   <td>{{Spec2('DOM3 Events')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="属性">属性</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Property</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>target</code> {{readonlyInline}}</td>
+   <td>{{domxref("EventTarget")}}</td>
+   <td>The event target (the topmost target in the DOM tree).</td>
+  </tr>
+  <tr>
+   <td><code>type</code> {{readonlyInline}}</td>
+   <td>{{domxref("DOMString")}}</td>
+   <td>The type of event.</td>
+  </tr>
+  <tr>
+   <td><code>bubbles</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event normally bubbles or not.</td>
+  </tr>
+  <tr>
+   <td><code>cancelable</code> {{readonlyInline}}</td>
+   <td>{{jsxref("Boolean")}}</td>
+   <td>Whether the event is cancellable or not.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.HTMLElement.input_event")}}</p>
+
+<div id="compat-desktop"></div>
+
+<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。</p>
+
+<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).</p>
+
+<p>[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。</p>
+
+<p>[4] 事件 target 是光标所在的最内侧的元素。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{event("keydown")}}</li>
+ <li>{{event("keyup")}}</li>
+ <li>{{event("keypress")}}</li>
+ <li>{{event("input")}}</li>
+ <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li>
+ <li>{{domxref("HTMLElement/change_event", "change")}}</li>
+ <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li>
+</ul>
+
+<p>此外，还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p>
+
+<p>
+ <audio class="hidden"></audio>
+</p>