oninput
用户在向input输入框里输入数据的时候,会触发oninput事件
<input type="text" placeholder="input输入事件" class="inp">
btn.onclick = function() {
console.log('1')
}
一开始是这样的
注意:当我在输入框里面输入的时候,控制台会打印出 123
输入几次,就会触发几次事件,就会打印几次 123
总结:只要在输入框输入东西,就会触发input事件
onblur
onblur事件是专门对应输入框的,当输入框失焦的时候,会触发onblur事件
聚焦:当你的鼠标在文本输入框点击的时候,文本输入框内的小竖线会闪烁,这叫做文本输入框的聚焦
失焦:当你的鼠标在输入框以外的地方点击的时候,小竖线会消失,这叫做失焦
<input type="text" placeholder="blur失焦事件" class="Blur">
Blur.onclick = function() {
console.log('123')
}
一开始是这样的:控制台没有输出
注意:当我输入框输入数字的时候,控制台并没有变化
但是,当输入框失焦的时候,注意控制台的变化
总结:只要输入框失焦了,就会触发blur失焦事件
onchange
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发
<input type="text" placeholder="change事件" class="Blur">
Blur.onclick = function() {
console.log('change事件')
}
一开始是这样的:控制台没有输出
当我往输入框输入数据的时候,控制台没任何变化
但是,当我输入框失焦的时候,注意控制台的变化
总结:只有当输入框的值发生改变 并且 输入框失焦的 时候,才会触发onchange事件
区别:
input:只要输入框输入就会触发事件
blur:只要输入框失焦就会触发事件
change:输入框的值变化并且失焦才会触发事件