IT技术 - `input` 元素的“更改”和“输入”事件之间的区别 - 吾爱随笔录

`input` 元素的“更改”和“输入”事件之间的区别

IT技术 javascript jquery events dom

2021-01-28 21:35:15

谁能告诉我 thechange和inputevents之间的区别是什么？

我正在使用 jQuery 添加它们：

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

它也适用于input代替change。

也许事件排序相对于焦点有一些不同？

5个回答

根据这篇文章：

oninput 当元素的文本内容通过用户界面更改时发生。
onchange在选择，检查状态或元素的内容发生变化时发生。在某些情况下，它仅在元素失去焦点或按下return(Enter) 且值已更改时发生。该onchange属性可以使用：<input>，<select>，和<textarea>。

特尔；博士：

oninput: 对文本内容所做的任何更改
onchange：
- 如果是<input />：改变+失去焦点
- 如果是<select>：更改选项

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

<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>

不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点时发生，内容发生改变后。

2021-03-13 21:35:15

我仍然不清楚两者之间的区别。根据您的描述，它们听起来非常相似。

2021-03-19 21:35:15

换句话说，当更改、删除或添加任何字符时立即触发“输入”，而在控件失去焦点后评估“更改”并且仅在值更改时发生

2021-04-01 21:35:15

我刚试过 Chrome。onchange当您在仍然专注的情况下按 Enter 键时也会触发。

2021-04-01 21:35:15

@JustinMorgan 就像在 JSFiddle 示例中一样，onchange“当元素失去焦点时”oninput发生，而每次文本更改时都会发生。

2021-04-02 21:35:15

在change event大多数浏览器火灾时，内容变更和元素丢失focus。它基本上是变化的集合。它不会像这种情况那样为每一次更改触发input event。
在input event火上同步为元素的含量变化。因此，事件侦听器往往会更频繁地触发。
不同的浏览器并不总是同意是否应该为某些类型的交互触发更改事件

我认为输入事件不能保证同步触发。

2021-03-13 21:35:15

@TimDown 是否同步触发？

2021-03-19 21:35:15

@SurajJain：老实说，我不确定。

2021-03-19 21:35:15

此外，所有浏览器的当前版本都支持该input事件。

2021-03-21 21:35:15

@TimDown，这就是我说浏览器支持各不相同的原因。不是每个人都有每个浏览器的当前版本。

2021-04-07 21:35:15

这两个事件之间最显著的区别是什么原因引起的value上的变化<input>。

根据MDN：

的input事件触发时value的<input>，<select>或<textarea>元件已被更改。

又名，

`input`触发任何时间的`value`变化。

change 有点复杂：

当用户提交对元素的更改时，change将针对<input>、<select>和<textarea>元素触发该事件value。与input事件不同的change是，不一定每次更改元素的value.

换句话说，

`change`当用户更改`value`.

当正是它激发依赖于type的<input>：

为了...

“收音机”和“复选框”：
- 当元素为时:checked，通过键盘或鼠标单击
“日期”和“文件”：
- 当显式提交更改时，即。选择日期或文件
“文本”：
- 当元素在其值已更改但未提交后失去焦点时

公平警告，浏览器是善变的，并不总是在事件上达成一致。然而，这确实是规范，您应该能够依靠这些时间。

MDN 文档有明确的解释（不确定是什么时候添加的）：

当用户提交对元素值的更改时，将针对input、select和textarea元素触发 change 事件。与 input 事件不同，change 事件不一定会在每次更改元素值时触发。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

似乎这个问题已经成为我不时访问的那些问题之一。我不喜欢为简单的事情阅读文字墙。所以我决定发布一个实用的答案。

使用以下演示，您可以检查触发了哪些事件以及以何种顺序触发。

演示截图

显示代码片段

let eventsToListen = [
    "focus",
    "blur",
    "input",
    "change",
];
let inputs = Array.from(
    document.querySelectorAll("#inputs :is(input, textarea, select)")
);
inputs.forEach(input => {
    input.eventQueue = [];
    let queueLimit = eventsToListen.length * 2;
    let queueDisplay = input.closest("td").nextElementSibling;
    eventsToListen.forEach(event => {
        input.addEventListener(event, () => {
            input.eventQueue.push(event);
            if (input.eventQueue.length > queueLimit) {
                Array(input.eventQueue.length - queueLimit).fill(null).forEach(
                    _ => input.eventQueue.shift()
                );
            }
            queueDisplay.textContent = input.eventQueue.join(", ");
        });
    });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}
body {
    font-family: sans-serif;
    box-sizing: border-box;
    background-color: hsl(0, 0%, 90%);
}
#inputs {
    margin: 1em;
}
#inputs td {
    padding: 0.1em;
}
#inputs td:nth-child(2) :not(input[type=radio]):not(input[type=checkbox]) {
    width: 100%;
}
#inputs label {
    display: table;
}
#inputs td:last-child {
    font-style: italic;
    font-size: 0.8em;
    opacity: 0.7;
    padding-left: 1em;
}
#notices {
    margin: 1em;
}
#notices ul {
    padding-left: 2em;
    line-height: 2;
}
#notices > ul {
    margin-top: 0.5em;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
    transform: scale(1.5);
}

<table id="inputs">
    <tr>
        <td>text</td>
        <td><input type="text" /></td>
        <td></td>
    </tr>
    <tr>
        <td>number</td>
        <td><input type="number" /></td>
        <td></td>
    </tr>
    <tr>
        <td>textarea</td>
        <td><textarea></textarea></td>
        <td></td>
    </tr>
    <tr>
        <td>select</td>
        <td>
            <select>
                <option>-</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
            </select>
        </td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2">radio</td>
        <td>
            <label><input type="radio" name="something" /> Option 1</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <label><input type="radio" name="something" /> Option 2</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td style="padding-right: 0.5em">checkbox</td>
        <td>
            <label><input type="checkbox" name="something2" /> Option 1</label>
        </td>
        <td></td>
    </tr>
</table>

<hr>

<div id="notices">
    notice that:
    <ul>
        <li>"input" event can occur multiple times before a "change" event occurs on text/number/textarea</li>
        <li>"input" and "change" event seem to occur together/sequentially on select</li>
        <li>"input"/"change" event might occur multiple times before a "blur" event occurs on select
            <ul>
                <li>when arrow keys are used to select an option</li>
            </ul>
        </li>
    </ul>
</div>

其它你可能感兴趣的问题

上一篇如何对带有钩子的元素数组使用多个引用？下一篇客户端密码加密

`input` 元素的“更改”和“输入”事件之间的区别

input触发任何时间的value变化。

change当用户更改value.

`input`触发任何时间的`value`变化。

`change`当用户更改`value`.