输入框的使用非常频繁，需求也很广泛。所以针对输入框的事件，我们思路一定要清晰。focus、blur、input、change功能分别是什么？有什么区别？如何选用？常用的场景有哪些？

首先，focus和blur是一对。针对输入框是否聚焦的事件，即输入框是否被选中。

focus事件

触发时机：点击或通过Tab键聚焦到输入框时。

典型应用场景：

1、自动选中输入框中的文本。如浏览器网址输入框，鼠标点击一下地址栏，就会全选网址，方便修改。

通过 focus 事件 + select() 方法实现

input.addEventListener('focus', () => {

     input.select(); // 自动选中文本

});

2、提示功能。如百度下拉框。

3、其他交互功能。如输入框聚焦时，背景变成白色、边框高亮显示等。

blur事件

触发时机：点击输入框以外的地方，或通过Tab键离开输入框。

典型应用场景：

1、表单验证。如平时注册账号，失去焦点时，会提示手机号、邮箱是否输入正确。

input事件

触发时机：文本框内容实时变化时触发，包括键盘输入、粘贴、剪切等。

典型应用场景：

1. 关键词自动补全功能