JavaScript监听change和input事件

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        在网页开发中,我们常需要对表单进行验证或增加额外交互逻辑。实现这些功能的关键就是能实时捕获表单元素的值变化。本文我们将具体讨论监听表单变化的两种事件:change和input事件,以及这两者的区别和应用场景。

​

✨ 正文

在网页开发中,我们经常需要监听表单元素的值的变化,比如input输入框的值发生改变时做出响应。这里我们主要来看下change和input这两个事件的区别和使用场景。

change事件

change事件会在元素的值改变并失去焦点后触发,例如对于input元素,它的值在失去焦点后发生了改变:

<input type="text" id="input">

input.addEventListener('change', () => {
  alert('Value changed'); 
});

 

这里我们需要完成输入并将焦点移走,change事件才会触发。

change常用于select、checkbox、radio等表单元素的值变化时执行更新逻辑。

多种表单元素的change事件用法:

// Select变化
select.addEventListener('change', () => {
  // 处理select变化
});

// Checkbox变化 
checkbox.addEventListener('change', () => {
  // 处理选中变化  
});

// Radio变化
radio.addEventListener('change', () => {
  // 处理选择变化
});

input事件

input事件会在元素的值每次改变时立即触发,不需要失去焦点。

例如对于一个输入框:

input.addEventListener('input', () => {
  alert('Value changed'); 
});

现在任何输入都会触发事件回调执行。

input事件常用于输入框需要实时响应用户输入时,比如输入文字实时搜索建议。

input事件的兼容性信息:

注意:input事件在IE9以下版本无法使用,需要引入兼容代码:

// 兼容IE9以下 
if (!('oninput' in document.createElement('input'))) {
  input.addEventListener('keyup', inputHandler);
} else {
  // 使用input事件
}

 

示例

下面是一个change和input事件的示例,输入文本时会同时显示两个事件的触发情况:

<input type="text" id="input">

<div id="change">change:</div>
<div id="input">input:</div>

input.addEventListener('change', () => {
  change.innerHTML = new Date();  
});

input.addEventListener('input', () => {
  input.innerHTML = new Date();
});

可以看到input会在每次输入时触发,而change只在失去焦点时触发。

更多表单元素的input和change对比示例:

<!-- 输入框 -->
<input type="text" id="input">

<!-- 下拉选择框 -->  
<select id="select">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- 单选框 -->
<input type="radio" id="radio" name="radio"> 

<!-- 复选框 -->
<input type="checkbox" id="checkbox">

// 输入框
input.addEventListener('input', () => {
  // ...  
})

// 选择框
select.addEventListener('change', () => {
  // ...
})

// 单选框 
radio.addEventListener('change', () => {
  // ...
})

// 复选框
checkbox.addEventListener('change', () => {
  // ...  
})

 

总结

• change事件是在值改变且失去焦点后触发
• input事件是在值每次改变时立即触发
• 根据需要选择合适的事件,input用于实时响应,change用于在终端变化时执行

这样我们就可以根据具体场景选择合适的change或input事件来响应表单元素值的变化。

 建议对于需要实时响应的输入框,同时使用input和change事件,以便覆盖更多场景。

 

✨ 结语

        change和input作为两种核心的表单变化事件,开发中根据实际需求选择使用可以让我们更好地控制和响应表单交互。input适用于需要实时反馈的场景,而change更多用于提交类操作。合理利用好这两者可以大幅优化表单交互体验。

​