“改变”之间的差异和“输入” `input`元素的事件 [英] Difference between "change" and "input" event for an `input` element

问题描述

有人能告诉我更改和输入事件之间有什么区别？

Can someone tell me what the difference between the change and input events is?

我使用jQuery添加它们：

I am using jQuery for adding them:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

它也适用于输入而不是更改 。

相对于焦点，事件排序可能有些不同？

Maybe some difference in the event ordering relative to focus?

推荐答案

根据这篇文章：

• oninput <当通过用户界面更改元素的文本内容时，会发生/ code> 事件。

<$ c当选择，检查状态或元素的内容 onchange g>已经改变。在某些情况下，它仅在元素失去焦点时发生。 onchange属性可用于：< input> ，< select> 和< textarea> 。

onchange occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus. The onchange attribute can be used with: <input>, <select>, and <textarea>.

TL; DR：

• oninput ：对文字内容所做的任何更改


• onchange ：
  
  
  
  
  • 如果是< input /> ：更改+失去焦点
  
  
  • 如果是< select> ：更改选项
  
  
  • oninput: any change made in the text content
  • onchange:
    • If it is an <input />: change + lose focus
    • If it is a <select>: change option

    $("input, select").on("input", function () {
        $("pre").prepend("\nOn input. | " + this.tagName);
    }).on("change", function () {
        $("pre").prepend("\nOn change | " + this.tagName);
    }).on("focus", function () {
        $("pre").prepend("\nOn focus | " + this.tagName);
    }).on("blur", function () {
        $("pre").prepend("\nOn blur | " + this.tagName);
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" />
    <select>
      <option>Alice</option>
      <option>Bob</option>
      <option>Carol</option>
      <option>Dave</option>
      <option>Emma</option>
    </select>
    <pre></pre>

    这篇关于“改变”之间的差异和“输入” `input`元素的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！