- oninput事件:是在用户输入时触发;该事件在
<input>
或<textarea>
元素的值发生改变时触发。 - onkeyup事件:在键盘按键被松开时发生。即键盘弹起时触发。
- onchange事件:输入完毕后,失去焦点时触发。可用于
<input>
、<textarea>
、<select><select/>
。
注:事件触发顺序是:oninput - onkeyup - onchange(失去焦点)
提示:与onkeyup 事件相关的事件发生次序:onkeydown-onkeypress-onkeyup
(附:onkeypress 事件会在键盘按键被按下并释放一个键时发生。)
一、 oninput事件与onchange事件对比:
该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen>
和 <select>
元素。
input表单:
<input type="text" name="">
script代码:
var inp=document.getElementsByTagName("input")[0];
inp.onchange=change;
inp.oninput=inpu;//边输入边触发函数
inp.onkeyup=key;
// 也可以用事件监听的方式,这里只写一个为例
// inp.addEventListener("change",change)
function change(){
console.log(inp.value+"-change");
}
function inpu(){
console.log(inp.value+"-input");
}
function key(){
console.log(inp.value+"-keyup");
}
比如输入“你”,运行结果:
上图输入n i 比较连续,与输入的快慢也有关系,慢速输入n i 结果是这样的:
二、select下拉列表适用onchange()
当值发生改变时触发,选择的值需要与上一次不同。相同时不会触发onchange
事件。
这里扩展一下,如果开发时与数据库等相关联,一定要设置好select
中option
的value
值。
欢迎大家补充,下方留言~