diff options
Diffstat (limited to 'files/zh-cn/web/events/change/index.html')
| -rw-r--r-- | files/zh-cn/web/events/change/index.html | 124 |
1 files changed, 0 insertions, 124 deletions
diff --git a/files/zh-cn/web/events/change/index.html b/files/zh-cn/web/events/change/index.html deleted file mode 100644 index 6a997fc430..0000000000 --- a/files/zh-cn/web/events/change/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -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', '<input type="radio">')}}</code> 和 <code>{{HTMLElement('input/checkbox', '<input type="checkbox">')}}</code>；</li> - <li>当用户显式提交改变时（例如：点击了 {{HTMLElement("select")}}中的一个选项，从 <code>{{HTMLElement('input/date', '<input type="date">')}}</code> 标签选择了一个日期，通过 <code>{{HTMLElement('input/file', '<input type="file">')}}</code> 标签上传了一个文件等）；</li> - <li>当标签的值被修改并且失去焦点后，但未提交时（例如：对{{HTMLElement("textarea")}} 或者 <code>{{HTMLElement('input/text', '<input type="text">')}}</code>的值进行编辑后）。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="<select>_元素"><select> 元素</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="notranslate"><label>Choose an ice cream flavor: - <select class="ice-cream" name="ice-cream"> - <option value="">Select One …</option> - <option value="chocolate">Chocolate</option> - <option value="sardine">Sardine</option> - <option value="vanilla">Vanilla</option> - </select> -</label> - -<div class="result"></div></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) => { - const result = document.querySelector('.result'); - result.textContent = `You like ${event.target.value}`; -}); -</pre> - -<h4 id="结果">结果</h4> - - - -<h3 id="文本输入元素">文本输入元素</h3> - -<p>对于一些元素，包括 <code><input type="text"></code>，<code>change</code> 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="notranslate"><input placeholder="Enter some text" name="name"/> -<p id="log"></p></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><select></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> |