文本框重要事件的区分

input

1. input：用户实时输入任何文本都会触发（输入法工作时一直收集，收集的value就是输入的内容）。

change

1. change：元素的值(value)发生改变时触发，失去焦点默认进行一次值的判断，不具有实时触发的效果。

• 注意：搜索功能如果使用change事件，value不改变时，不会触发。可以在搜索之后将value清空

compositon系列

1. compositon系列最大的特点是 只收集中文，也是实时触发；
2. compositionstart：使用拼音输入法开始输入时触发,e.target.value收集的是文本框内上一次的中文。在输入中文的时候，compositionstart先于input事件触发。
3. compositionupdate：使用拼音输入法正在输入时实时触发，e.target.value收集的是实时的字母。
4. compositionend：使用拼音输入法结束输入时触发，e.target.value收集的是此刻文本框的内容（包括之前收集内容的叠加）

注意

1. 搜索的实时筛选功能需要用input事件（因为 change没有实时效果，composition系列只在拼音输入法触发）
2. 但使用input事件时，会多次触发发送无效请求，解决方案如下：

• 一是使用防抖技术。详情可见：juejin.cn/post/719299… ，适用于任何情况；
• 二是加锁。因为compositionstart先于input事件触发，因此可以在compositionstart触发时，加锁阻止input触发；当compositonend触发时，解锁。，适用于搜索中文的情况。

const input = document.querySelector("#input");
let lock = false;
input.addEventListener("compositionstart", () => {
  lock = true;
});
input.addEventListener("compositionupdate", () => {});
input.addEventListener("compositionend", (e) => {
  lock = false;
  console.log(e.target.value);
});
input.addEventListener("input", (e) => {
  !lock ? console.log(e.target.value) : null;
});

V-model

1. v-model底层其实使用的就是 利用compositon加锁优化 的方法，因此没有input频繁触发的问题。