JS基础——事件对象event

事件为什么会是对象呢？先了解一下事件处理

一、事件处理

   JS在事件处理函数中提供了事件对象，帮助处理鼠标和键盘事件。同时还可以修改一些事件的捕获和冒泡流的函数。

事件处理分为三部分：对象.事件处理函数=函数

document.οnclick=function(){ 
    alert(this.value); //this代表着在该作用域中离它最近的对象。
}

以上事件处理中，document为对象，click是事件处理类型，onclick为事件处理函数。function()为匿名函数，用于触发后执行。

那么什么是事件对象呢？当我们触发document的click事件时，便会产生一个事件对象，这个对象中包含着这个事件的相关信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。

小例子：

	document.οnclick=function(){
		alert(arguments.length); //浏览器会默认传递一个参数
		alert(arguments[0]);//[object MouseEvent]，如果是keydown,则为[object KeyboardEvent]
	}

可以看出，事件处理中，浏览器已经默认将一个参数传递过来了。而在 普通函数和匿名函数中，是不传递event对象的。

event对象的接收：

在W3C中可以直接接受event对象，如：

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

但是IE中，不支持直接接收，而是通过window.event来接收。

二、获取鼠标和键盘事件信息

1、鼠标事件

   主要是在鼠标事件执行后，通过事件对象来获取相关事件的一些属性，比如左键还是右键。在按键时，是否按住了所规定的键值如ctrl,shift等常用键，或者鼠标点击的位置等相关信息。

  通过clientX/Y来获取鼠标点击的在可视区域的横纵坐标，screenX/Y可获得在整个屏幕的横纵坐标。

关于修改键的一个小例子：

首先了解一下事件对象关于修改键的一些方法：

	window.οnlοad=function(){
		document.οnclick=function(evt){
			var e=evt||window.event; <span style="font-family:SimSun;">//跨浏览器兼容事件对象</span>
			alert(getKey(evt));
		};
		
	}
	function getKey(evt){
		var e=evt||window.event;
		var keys=[];  <span style="font-family:SimSun;">//创建一个数组，用来存放按下的键值</span>
		
		if(e.shiftKey) keys.push('shift');
		if(e.ctrlKey) keys.push('ctrl');
		if(e.altKey) keys.push('alt'); //单击+Alt和360快捷键冲突
		return keys;
	}

现在是不是对事件对象的功能有了一个大概的印象呢？看一下键盘事件

2、键盘事件

   主要应用于按键时，获取按下各个键值的键码或字符编码。主要发生在keydown和keypress事件中

   keycode：不区分大小写，与键盘上的键值位置一一对应。用于keydown和keyup事件

   charcode：字符编码，区分大小写，其实返回的就是ASCII码。只支持keypress事件

三、事件流

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

   1、冒泡：从里向外逐个触发。

   2、捕获：从外向里逐个触发

   事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候而层叠在你点击范围 ， 并不是只有当前被点击的元素会触发事件 ， 那么你点击其中一个元素的所有元素都会触发事件。而如果我们想要只触发其中一个事件时，此时就需要取消冒泡或捕获。现代浏览器默认都是冒泡类型，所以通常只需要取消冒泡即可。

   如何取消？

	function stopPro(evt) {
		var e = evt || window.event;
		window.event ? e.cancelBubble = true : e.stopPropagation(); <span style="font-family:SimSun;">//兼容W3C和IE</span>
	}

四、事件对象中的this传递问题

  以上是关于事件对象的一些基础，此外，还需注意在现代事件绑定中匿名函数通过call来进行对象冒充时，传递参数时，第一个参数默认传递给要冒充的事件对象，而从第二个参数开始才开始真正传递给实际要传递的参数。什么意思呢？看一个小例子：

1、事件绑定函数

	function addEvent(obj,type,fn){
		if ( typeof obj.addEventListener!='undefined'){ //W3C
			obj.addEventListener(type,fn,false);
		}else if(typeof obj.attachEvent!='undefined'){//IE
			obj.attachEvent('on'+type,function(){
				fn.call(123<span style="font-family:SimSun;">,456,789</span>); <span style="font-family:SimSun;">//利用对象冒充来解决this传递问题</span>
			});
		}
	}

2、调用

 

window.οnlοad=function(){

    addEvent(document,'click',fn);

}

function fn(a,b){

    alert(this);//123，默认第一个参数为传递要冒充的对象，为123

    alert(a);//call中从第二个参数起赋值给函数的参数，456 

    alert(b);<span style="font-family:SimSun;">//789</span>
}

总结：事件对象即是事件触发时，浏览器传递给事件处理的一个对象，通过这个对象，我们可以获得相应时间处理的一些相关信息，以便于我们对接下来的操作做进一步处理。