文本类操作事件、鼠标事件、键盘事件

A.文本类操作事件

focus、blur、input(实时改变)、change（看是否改变）

<input type="text" value="Enter" onfocus="if(this.value =='Enter'){this.value='';this.style.color='red'}"
onblur="if(this.value==''){this.value='Enter';this.style.color='blue'}">
复制代码

onfocus（当焦点在input上时）：默认值消失，输入的字体为红色；onblur（当input失去焦点时）：如果值为空则设置默认值为'Enter'，字体为蓝色。

var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
  console.log('这是oninput : ' + this.value);
}
input.onchange = function(e){
  console.log('这是onchange : ' + this.value);
}
// 这是oninput : k
// 这是oninput : ka
// 这是oninput : kao
// 这是onchange : kao
复制代码

当输入字节的时候，oninput实时反馈输入值的情况，而onchange当input失去焦点时才执行。

B.鼠标事件

鼠标事件

click、mousedown、mousemove、mouseup、
contextmenu（右键菜单事件）、
mouseover、mouseout、mouseenter、mouseleave
复制代码

判断鼠标左右键（能触发的只有 mouseup / mousedown）

e.button = 2 -->右键
左键：0 ；中间滚轮：1；右键：2；
复制代码

C.键盘事件

鼠标事件

1) keydown、keypress、keyup（相当于手机端的touchstart、touchmove、touchend）
2) keydowm 可以响应任意键盘按键，keypress 只可以相应的字符类键盘按键
3) keypress 返回ASCII码，可以转换成相应字符。
复制代码

返回对应字符类按键的字符

document.onkeypress = function (e){
    console.log(String.fromCharCode(e.charCode));
}
复制代码