首页 > 代码库 > JS基础——事件对象event

JS基础——事件对象event

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

一、事件处理

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

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

document.onclick=function(){ 
    alert(this.value); //this代表着在该作用域中离它最近的对象。
}
以上事件处理中,document为对象,click是事件处理类型,onclick为事件处理函数。function()为匿名函数,用于触发后执行。

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

小例子:

	document.onclick=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.onload=function(){
		document.onclick=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.onload=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>}

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


JS基础——事件对象event