一、input事件的基本熟悉
在JavaScript中，input事件是用户在表单元素（如文本框、下拉菜单等）中输入数据时触发的事件。与keydown、keyup事件不同，input事件不仅能够检测用户输入的按键，还能够检测用户使用粘贴、剪切、撤销等操作对表单元素的改变。
下面是一个简单的input事件的示例：
<input type="text" id="input1">
<script>
var input1 = document.getElementById("input1");
input1.addEventListener("input", function(e){
console.log(e.target.value);
});
</script>
上面的代码创建了一个文本框，当用户在文本框中输入内容或者使用其他操作改变文本框的内容时，控制台会输出文本框当前的值。
二、input事件的使用场景
input事件广泛应用于表单验证、搜索联想、自动完成等场景，下面分别进行介绍。
1、表单验证
表单验证是Web开发中非常重要的一个环节，它可以帮助我们检测用户输入的合法性，并及时提示用户错误信息。在表单验证中，输入框的值通常是我们所关注的对象，此时我们就可以使用input事件来监听输入框的值，实时进行验证。例如，以下是一个简单的表单验证的示例：
<form id="myForm">
<input type="text" name="username">
<!-- 其他表单元素-->
</form>
<script>
var form = document.getElementById("myForm");
var username = form.elements.username;
username.addEventListener("input", function(){
if(username.value.length < 6){
// 提示用户名长度不够
}else{
// 提交表单
}
});
</script>
上面的代码中，当用户输入用户名时，input事件会实时验证用户名是否达到长度要求，如果没有达到要求则提示用户。
2、搜索联想
搜索联想一般应用于搜索框，当用户输入内容时，会自动弹出一些关于用户输入的建议内容，方便用户选择。在搜索联想中，我们可以使用input事件来监听搜索框的值，当用户改变了搜索框的值后，我们可以通过Ajax请求获取相关建议并展示给用户。例如，以下是一个简单搜索联想的示例：
<input type="text" id="search">
<ul id="suggest"></ul>
<script>
var search = document.getElementById("search");
var suggest = document.getElementById("suggest");
search.addEventListener("input", function(){
var keywords = search.value;
// 发送Ajax请求获取搜索建议
// 将搜索建议展示给用户
});
</script>
上面的代码中，当用户输入内容时，input事件会监听并检测搜索框的值，当用户改变搜索框的值时，会发送Ajax请求获取搜索建议，并将建议展示给用户。
3、自动完成
自动完成功能也经常出现在搜索框中，当用户输入一部分内容时，系统会自动补全剩余内容。在自动完成中，我们同样可以使用input事件来监听输入框的值，实时检测用户输入的内容，并根据输入内容来返回自动完成结果。例如，以下是一个简单自动完成的示例：
<input type="text" id="input2">
<ul id="autocomplete"></ul>
<script>
var input2 = document.getElementById("input2");
var autocomplete = document.getElementById("autocomplete");
input2.addEventListener("input", function(){
var keywords = input2.value;
// 发送Ajax请求获取自动完成结果
// 将自动完成结果展示给用户
});
</script>
上面的代码中，当用户输入一部分内容时，input事件会监听并检测输入框的值，当用户输入内容改变时，会发送Ajax请求获取自动完成结果，并将结果展示给用户。
三、监听input事件的属性
在使用input事件时，除了监听用户输入框的值以外，我们还可以通过input事件的相关属性来获取更详细的信息，下面介绍常用的属性：
1、inputElement.value
inputElement.value属性用于获取或设置输入框的值。例如：
<input type="text" id="input3">
<script>
var input3 = document.getElementById("input3");
input3.addEventListener("input", function(){
console.log(input3.value);
});
</script>
上面的代码中，input3.value用于获取输入框当前的值，并将其输出到控制台中。
2、inputElement.selectionStart和inputElement.selectionEnd
inputElement.selectionStart和inputElement.selectionEnd属性用于获取或设置输入框选中文本的起始位置和结束位置。例如：
<input type="text" id="input4">
<script>
var input4 = document.getElementById("input4");
input4.addEventListener("input", function(){
console.log(input4.selectionStart);
console.log(input4.selectionEnd);
});
</script>
上面的代码中，input4.selectionStart用于获取用户选中文本的起始位置，input4.selectionEnd用于获取用户选中文本的结束位置，并将它们输出到控制台中。
3、inputElement.setSelectionRange(start, end)
inputElement.setSelectionRange(start, end)方法用于设置输入框文本选中的起始位置和结束位置。例如：
<input type="text" id="input5">
<script>
var input5 = document.getElementById("input5");
input5.addEventListener("input", function(){
input5.setSelectionRange(3, 5);
});
</script>
上面的代码中，当用户输入内容时，input事件会将输入框文本从第3个字符到第5个字符选中。
四、避免input事件过度触发
由于input事件会实时监听用户输入的变化，它的触发频率非常高，通常会造成过度的触发，从而影响性能。在实际应用中，我们可以通过一些手段来避免input事件过度触发，提高性能。下面介绍两种常见的方法：
1、使用debounce函数
debounce函数是一种常见的函数节流方案，它可以将高频率触发的函数延时执行，从而降低函数的执行频率。下面是一个简单的debounce函数实现：
function debounce(fn, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context, args);
}, delay);
};
}
我们可以将需要降低触发频率的函数作为debounce函数的参数传入，就可以实现函数节流效果。例如：
<input type="text" id="input6">
<script>
var input6 = document.getElementById("input6");
input6.addEventListener("input", debounce(function(){
console.log(input6.value);
}, 500));
</script>
上面的代码中，当用户输入内容时，input事件将每500ms触发一次。
2、使用setTimeout函数
setTimeout函数可以将高频率触发的函数通过一定的时间间隔来降低触发频率，与debounce函数类似。我们可以通过setTimeout函数来控制input事件的触发频率。例如：
<input type="text" id="input7">
<script>
var input7 = document.getElementById("input7");
var timer = null;
input7.addEventListener("input", function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
console.log(input7.value);
}, 500);
});
</script>
上面的代码中，当用户输入内容时，setTimeout函数将每500ms触发一次，以此来降低input事件的触发频率。
