表单输入事件辨析-oninput、onkeyup、onchange 开发须知！

• 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值。

欢迎大家补充，下方留言~