深入理解JS的事件绑定、事件流模型

一、JS事件

（一）JS事件分类

1.鼠标事件：

click/dbclick/mouSEOver/mouSEOut

2.HTML事件：

onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

3.键盘事件：

keydown：键盘按下时触发 keypress：键盘按下并抬起的瞬间触发。 keyup：键盘抬起触发

[注意事项]

①执行顺序：keydown keypress keyup ②keypress只能捕获数字，字母，符号键，而不能捕获功能键。 ③长按时循环执行keydown--keypress ④有keydown，并不一定有keyup，当长按时焦点失去，将不再触发keyup ⑤keypress区分大小写，keydown，kewup不区分。

4.事件因子：

当触发一个事件时，该事件将向事件所调用的函数中，默认传入一个参数，

这个参数就是一个事件因子，包含了该事件的各种详细信息。

rush:js;"> document.onkeydown=function(e){ console.log(e); } document.onkeydown=function(){ console.log(window.event); }

rush:js;"> //兼容浏览器的写法： document.onkeydown=function(e){ e==e||Window.event; var Code=e.keyCode||e.which||e.charCode; if(code==13){ //回车 } }

5.如何确定键盘按键？

①再出发的函数中，接收事件因子e。 ②可以使用e.key直接去到按下的按键字符（不推荐使用）。 ③一次可以使用keyCode/which/charCode取到按键的ASCII码值。

(兼容各种浏览器的写法)

<div class="jb51code">
<pre class="brush:js;">
var Code=e.keyCode||e.which||e.charCode;

//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}
if(e.keyCode==13){
isEnt=1;
}
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}

document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}