一、事件对象

1、事件对象特征

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

document.onclick=function(){
    alert("Hello");
}；

上例代码详解：

• click表示一个事件类型：单击；
• onclick表示一个事件处理函数或绑定对象的属性（或者称事件监听器、侦听器）；
• document表示一个绑定的对象，用于触发某个元素区域；
• function（）匿名函数是被执行的函数，用于触发后的执行动作。

2、this关键字和上下文

在一个对象里，由于作用域的关系，this代表着离它最近对象。当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。事件对象一般也称之为event对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。

那么首先，就必须验证一下，在执行函数中没有传递参数，是否可以得到隐藏的参数。

<input type="button" value="登录">

<script>   
    var input=document.getElementsByTagName("input")[0];    
    input.onclick = function(){     //事件绑定的执行函数
        alert(arguments.length);    //1，得到一个隐藏参数
        alert(arguments[0]);        //[object MouseEvent]，鼠标事件对象
    }
</script>

通过事件绑定的执行函数是可以得到一个隐藏参数的，这说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。

然而上述方法比较麻烦，W3C提供 了一种简单的方法，直接通过接收参数来得到即可。可是IE不支持，IE自己定义了一个event对象，直接在window.event获取。

<input type="button" value="登录">
<script>   
    var input=document.getElementsByTagName("input")[0];    
    input.onclick = function(evt){     //事件绑定的执行函数
        var event = evt || window.event;
        alert(event);       //返回[object MouseEvent]
    }

二、鼠标事件

鼠标事件是Web上面最常用的一类事件，通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。

1、鼠标按钮

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

一般情况下，最多只使用主次中三个单击键，IE给出的其他组合键一般无法使用上，所以，我们只需要做上这三种兼容即可。

<input type="button" value="登录">
<script>   
    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;
            }
        }
    }
    var input=document.getElementsByTagName("input")[0];
	input.onmouseup = function (evt) {		//调用
		if (getButton(evt) == 0) {
			alert('按下了左键！');
		} else if (getButton(evt) == 1) {
			alert('按下了中键！');
		} else if (getButton(evt) == 2) {
			alert('按下了右键！' );
		}
	};
</script>

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));
};

三、键盘事件

用户在使用键盘时会触发键盘事件。

1、键码

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

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

    在不同浏览器中keydown 和 keyup 事件中有些按键对应的keyCode 值不一样，可自行做检测。

2、字符编码

Firefox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值。此时的keyCode通常等于0 或者也可能等于所按键的编码。IE和Opera则是在keyCode中保存字符的ASCII编码。可以使用String.fromCharCode()将ASCII编码转换成实际的字符。

四、W3C与IE

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

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

五、事件流

事件流是描述从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那点击其中一个元素时，并不是只有当前被点击的元素会被触发事件，而是层叠在你点击范围的所有元素都会触发事件。

事件流包括两种模式：冒泡 和 捕获。

• 事件冒泡，是从里往外逐个触发。现代的浏览器默认情况下都是冒泡模型。
• 事件捕获，是从外往里逐个触发。早期的Netscape默认情况。

而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。

事件冒泡和事件捕获是个很丰富的内容，另外展开=》