事件对象的键盘事件、event对象和事件流

一.键盘事件

用户在使用键盘时会触发键盘事件。“DOM2级事件”最初规定了键盘事件，结果又删除了相应的内容。最终还是使用最初的键盘事件，不过IE9已经率先支持“DOM3”级键盘事件。

1.键码：在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中大小写不影响。

document.onkeydown = function (evt) {alert(evt.keyCode);}; //按任意键，得到相应的keyCode

不同的浏览器在keydown和keyup事件中，会有一些特殊的情况：

在Firefox和Opera中，分号键时keyCode值为59，也就是ASCII中分号的编码;而IE和Safari返回186，即键盘中按键的键码。

2.字符编码

Firefox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的编码。IE和Opera则是在keyCode中保存字符的ASCII编码。

可以使用String.fromCharCode()将ASCII编码转换成实际的字符。

keyCode和charCode区别如下：比如当按下“a键(重视是小写的字母)时，

在Firefox中会获得(65对应A，97对应a)

keydown： keyCode is 65 charCode is 0
keyup： keyCode is 65 charCode is 0
keypress： keyCode is 0 charCode is 97

在IE中会获得

keydown： keyCode is 65 charCode is undefined
keyup： keyCode is 65 charCode is undefined
keypress： keyCode is 97 charCode is undefined

而当按下shift键时，在Firefox中会获得

keydown：keyCode is 16 charCode is 0
keyup： keyCode is 16 charCode is 0

在IE中会获得

keydown：keyCode is 16 charCode is undefined
keyup： keyCode is 16 charCode is undefined

keypress不会获得任何的charCode值，因为按shift并没输入任何的字符，并且也不会触发keypress事务

在keydown事件里面，事件包含了keyCode – 用户按下的按键的物理编码。

在keypress里，keyCode包含了字符编码，即默示字符的ASCII码。如许的情势实用于所有的浏览器 – 除了火狐，它在keypress事务中的keyCode返回值为0。

二.W3C与IE：在标准的DOM事件中，event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

W3C中event对象的属性和方法

IE中event对象的属性

在这里，我们只看所有浏览器都兼容的属性或方法。首先第一个我们了解一下W3C中的target和IE中的srcElement，都表示事件的目标。

function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement; //兼容得到事件目标DOM对象
}
document.onclick = function (evt) {var target = getTarget(evt); alert(target);};

三、事件流：是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

事件冒泡：当一个元素接收到事件的时候，会把它接收到的事件传给自己的父级，直到window。这里传递的仅仅是事件并不传递所绑定的事件函数，所以如果父级没有为这个事件绑定事件函数，就算传递了事件，也不会有什么表现，但事件确实传递了。

事件冒泡，是从里往外逐个触发。事件捕获，是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型，而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。

document.onclick = function () {alert('我是document');};
document.documentElement.onclick = function () {alert('我是html');};
document.body.onclick = function () {alert('我是body');};
document.getElementById('box').onclick = function () {alert('我是div');};
document.getElementsByTagName('input')[0].onclick = function () {alert('我是input');};

在阻止冒泡的过程中，W3C和IE采用的不同的方法，那么我们必须做一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

事件委托

事件委托就是利用冒泡原理，把处理任务委托给父级元素，然后通过目标事件（e.target）确定事件源，并执行事件处理

优点：

1.不需要给每一个元素都添加监听事件，而是通过委托给父元素处理，减少内存消耗，提高性能

2.可以方便的动态添加元素不需要为新添加的元素重新绑定事件