input 各类事件汇总&&触发时机&&触发顺序

今天梳理了一下input框的各类事件，简单介绍一下吧

目录

1.click

2.focus

3.blur

4.change

5.input

6.keydown

7.keyup

8.select

---

1.click

点击事件，简单易理解，点击触发，等下跟focus事件一起比较

2.focus

获取焦点事件

click和focus对比，看下输出

可以看出，先执行了获取焦点的事件，再是click事件，foucs的优先级高于click事件

focus > click 

3.blur

失去焦点事件，这个很好理解，当然，前提是input框在获取焦点后，才能去监听失焦事件

4.change

监听input框的value改变时触发，前置条件是input框失去焦点或者按下回车键的时候才会监听

所以它不是即时响应去监听value值的变化的，一定是等到回车或是失焦去做对比，常见的应用场景是密码框的输入监听

这个是回车后触发的，好多介绍是失焦触发，当前浏览器（edge）按下回车键即可触发

5.input

监听input框的value改变时触发，没有前置条件，即时触发

change和input对比，看下输出

放一张动图看下效果，输入12345的时候，输出了五次input，最后失焦的那一刻才会输出change

小结：

• change不是实时监听，必须在失焦或者回车时后才会触发
• input实时监听，只要input框value值发生变化就触发

简单头脑风暴下，change适合密码框这类场景，input事件适合搜索即时联想这类场景（类似搜索引擎的输入框）

6.keydown

键盘按下时触发，不做过多赘述了

7.keyup

键盘弹起时触发，不做过多赘述了

keydown和keyup和input对比，看下输出

上图是一个完整的input框输入数字1的过程，从获取焦点到失焦，发现input事件是介于keydown和keyup之间的，按照惯性，可能我以为是在keyup之后才会触发input事件呢

 keydown > input > keyup

8.select

当input框的内容被选中后执行，并非一定要全选。

这个事件是我第一次知道，以前竟然没有关注过，简单试了一下，放一张动图，更直观👇

还挺有意思的一个事件，之前孤陋寡闻了，后面跟出来的小的气泡框是我浏览器chatgpt的插件，大家可以忽略不记， 不过同时发散下使用场景，监听选中后内容，可以进行联想提示或者操作。

一共总结了这些，以后有啥想法再来补充吧~