JavaScript的事件对象

JavaScript 事件的一个重要方面是它们拥有一些相对一致的特色，能够给你的开发提供
更多的强大功能。最方便和强大的就是事件对象，他们能够帮你处理鼠标事件和键盘敲击方
面的状况，此外还能够修改通常事件的捕获/冒泡流的函数。

一．事件对象
事件处理函数的一个标准特性是，以某些方式访问的事件对象包含有关于当前事件的上
下文信息。
事件处理三部分组成：对象.事件处理函数=函数。例如：单击文档任意处。

document.onclick = function () {
alert('Lee');
};

PS：以上程序的名词解释：click 表示一个事件类型，单击。onclick 表示一个事件处理
函数或绑定对象的属性(或者叫事件监听器、侦听器)。document 表示一个绑定的对象，用于
触发某个元素区域。function()匿名函数是被执行的函数，用于触发后执行。

除了用匿名函数的方法做为被执行的函数，也能够设置成独立的函数。

document.onclick = box; //直接赋值函数名便可，无须括号
function box() {
alert('Lee');
}

this 关键字和上下文
在面向对象那章咱们了解到：在一个对象里，因为做用域的关系，this 表明着离它最近
对象。

var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
alert(this.value); //HTMLInputElement，this 表示input 对象
};

从上面的拆分，咱们并无发现本章的重点：事件对象。那么事件对象是什么？它在哪
里呢？当触发某个事件时，会产生一个事件对象，这个对象包含着全部与事件有关的信息。
包括致使事件的元素、事件的类型、以及其它与特定事件相关的信息。
事件对象，咱们通常称做为event 对象，这个对象是浏览器经过函数把这个对象做为参
数传递过来的。那么首先，咱们就必须验证一下，在执行函数中没有传递参数，是否能够得
到隐藏的参数。

function box() { //普通空参函数
alert(arguments.length); //0，没有获得任何传递的参数
}
input.onclick = function () { //事件绑定的执行函数
alert(arguments.length); //1，获得一个隐藏参数
};

经过上面两组函数中，咱们发现，经过事件绑定的执行函数是能够获得一个隐藏参数的。
说明，浏览器会自动分配一个参数，这个参数其实就是event 对象。

input.onclick = function () {
alert(arguments[0]); //MouseEvent，鼠标事件对象
};

上面这种作法比较累，那么比较简单的作法是，直接经过接收参数来获得便可。

input.onclick = function (evt) { //接受event 对象，名称不必定非要event
alert(evt); //MouseEvent，鼠标事件对象
};

直接接收event 对象，是W3C 的作法，IE 不支持，IE 本身定义了一个event 对象，直
接在window.event 获取便可。

input.onclick = function (evt) {
var e = evt || window.event; //实现跨浏览器兼容获取event 对象
alert(e);
};

二．鼠标事件
鼠标事件是Web 上面最经常使用的一类事件，毕竟鼠标仍是最主要的定位设备。那么经过
事件对象能够获取到鼠标按钮信息和屏幕坐标获取等。

1.鼠标按钮
只有在主鼠标按钮被单击时(常规通常是鼠标左键)才会触发click 事件，所以检测按钮
的信息并非必要的。但对于mousedown 和mouseup 事件来讲，则在其event 对象存在一
个button 属性，表示按下或释放按钮。

PS：在绝大部分状况下，咱们最多只使用主次中三个单击键，IE 给出的其余组合键一
般没法使用上。因此，咱们只须要作上这三种兼容便可。

function getButton(evt) { //跨浏览器左中右键单击相应
var e = evt || window.event;
if (evt) { //Chrome 浏览器支持W3C 和IE
return e.button; //要注意判断顺序
} else if (window.event) {
switch(e.button) {
case 1 :
return 0;
case 4 :
return 1;
case 2 :
return 2;
}
}
}
document.onmouseup = function (evt) { //调用
if (getButton(evt) == 0) {
alert('按下了左键！');
} else if (getButton(evt) == 1) {
alert('按下了中键！');
} else if (getButton(evt) == 2) {
alert('按下了右键！' );
}
};

2.可视区及屏幕坐标
事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区左边，另外一组是屏幕
坐标。

document.onclick = function (evt) {
var e = evt || window.event;
alert(e.clientX + ',' + e.clientY);
alert(e.screenX + ',' + e.screenY);
};

3.修改键
有时，咱们须要经过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为：
Shfit、Ctrl、Alt 和Meat(Windows 中就是Windows 键，苹果机中是Cmd 键)，它们常常被用
来修改鼠标事件和行为，因此叫修改键。

 

function getKey(evt) {
var e = evt || window.event;
var keys = [];
if (e.shiftKey) keys.push('shift'); //给数组添加元素
if (e.ctrlKey) keys.push('ctrl');
if (e.altKey) keys.push('alt');
return keys;
}
document.onclick = function (evt) {
alert(getKey(evt));
};

三．键盘事件
用户在使用键盘时会触发键盘事件。“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，即键盘中按键的键码。
PS：其余一些特殊状况因为浏览器版本太老和市场份额过低，这里不作补充。

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

function getCharCode(evt) {
var e = evt || window.event;
if (typeof e.charCode == 'number') {
return e.charCode;
} else {
return e.keyCode;
}
}

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

keyCode 和charCode 区别以下：好比当按下“a 键（重视是小写的字母）时，
在Firefox 中会得到
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 事务

PS：在keydown 事务里面，事务包含了keyCode – 用户按下的按键的物理编码。
在keypress 里，keyCode 包含了字符编码，即默示字符的ASCII 码。如许的情势实用于
全部的浏览器– 除了火狐，它在keypress 事务中的keyCode 返回值为0。

四．W3C与IE
在标准的DOM 事件中，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);
};

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

事件冒泡，是从里往外逐个触发。事件捕获，是从外往里逐个触发。那么现代的浏览器
默认状况下都是冒泡模型，而捕获模式则是早期的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();
}