此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element：input 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
当一个<input>、<select> 或<textarea> 元素的value 被修改时，会触发input 事件。
| Bubbles | Yes |
|---|---|
| Cancelable | No |
| Interface | InputEvent |
| Event handler property | GlobalEventHandlers.oninput |
input 事件也适用于启用了contenteditable 的元素，以及开启了designMode 的任意元素。在contenteditable 和designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。
对于type=checkbox 或type=radio 的input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5 规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用change 事件代替这些类型的元素。
备注：每当元素的value 改变，input 事件都会被触发。这与change 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。
示例
每当用户修改<input> 元素的 value 时，这个示例会记录 value。
HTML
html
<input placeholder="输入一些文本" name="name" /><p></p>JavaScript
js
const input = document.querySelector("input");const log = document.getElementById("values");input.addEventListener("input", updateValue);function updateValue(e) { log.textContent = e.target.value;}结果
属性
| Property | Type | Description |
|---|---|---|
target只读 | EventTarget | The event target (the topmost target in the DOM tree). |
type只读 | DOMString | The type of event. |
bubbles只读 | Boolean | Whether the event normally bubbles or not. |
cancelable只读 | Boolean | Whether the event is cancellable or not. |
规范
| Specification |
|---|
| UI Events # event-type-input |
| HTML # handler-oninput |