JavaScript学习12：事件对象

标签：javascript   事件   对象   

        JavaScript事件的一个重要方面是它们拥有一些相对一致的特点，可以给我们的开发提供更多的强大功能。最方便和强大的就是事件对象了，它们可以帮你处理鼠标和键盘方面的很多事情，此外我们还可以修改一般事件的捕获或者冒泡流的函数。

        在上篇博客中我们已经对事件有了一个基本的认识，结尾处我们提到了事件处理函数。事件处理函数的一个标准特性是，以某些方式访问的事件对象包含有关于当前事件的上下文信息。事件处理由三部分组成：对象.事件处理函数=函数。

        那么事件对象又是什么呢？它在哪里？

        当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。

        事件对象，我们一般称作为event对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。那么首先，我们就必须验证一下，在执行函数中有没有传递参数，是否可以得到隐藏的参数。     

<span style="font-size:18px;">function box(){
	alert(arguments.length);
}
window.box();          //普通空参函数，返回值为0，没有得到任何传递的参数

document.onclick=box;  //事件绑定函数，返回值为1，得到一个隐藏的参数</span>

        通过上面两组函数的比较，发现，通过事件绑定的执行函数是可以得到一个隐藏参数的，这就说明，浏览器会自动分配一个参数，这个参数其实就是event对象。我们可以将这个对象输出来看看，是什么   

<span style="font-size:18px;">document.onclick=function(){
	alert(arguments[0]);  //打印出来的是MouseEvent，即鼠标事件对象
}</span>

        鼠标事件

        鼠标事件是Web上面最为常用的一类事件，毕竟鼠标还是最主要的定位设备。那么我们可以通过事件对象获取到鼠标按钮信息和屏幕坐标等等。    

<span style="font-size:18px;">//跨浏览器左中右键单击响应
function getButton(evt){
	var e = evt||window.event;
	if(evt){
		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('您按下了右键！');
	}
};


//获取可视区及屏幕区的坐标
document.onclick=function(evt){
	var e=evt||window.event;
	alert(e.clientX+','+e.clientY+','+e.screenX+','+e.screenY);
};</span>

        键盘事件

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

        1键码

        在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。    

<span style="font-size:18px;">document.onkeydown=function(evt){
	alert(evt.keyCode);
};</span>

        2字符编码

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

<span style="font-size:18px;">function getCharCode(evt){
	var e=evt||window.event;
	if(typeof e.charCode=='number'){
		return e.charCode;
	}else{
		return e.keyCode;
	}
}</span>

        事件流

        最后我们要补充一个知识点，那就是事件流。这个我在上篇博客中也提到过，只不过当时认识并不是很深刻。事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。

        事件冒泡，是从里向外逐个触发；事件捕获，是从外向里逐个触发，下面的图可以形象的说明这点：

JavaScript学习12：事件对象

标签：javascript   事件   对象   

原文地址：http://blog.csdn.net/lianjiangwei/article/details/46714699