js的event对象 详解

一直在使用event.code来判断按键，可是对于event对象还有很多属性和兼容性的问题没怎么了解，今天好好看了一下。

一、event对象是什么

在很多情况，我们需要使用js的这个event对象，那么今天我就给大家说说event是什么东西

我们知道，js里有很多事件，比如onclick等。这些事件之所以可以称之为事件，不仅仅是因为他们可以有执行某种动作的能力，还有事件的一些状态属性，比如这个事件的返回值是什么等等，或者你可以理解为java里的反射Class，用来描述这些时间状态的对象，就是今天我们要讲的event对象。

二、如何获取event

有时候我们需要用到event，比如最常用到的便是阻止事件的冒泡行为。那么最起码我们得先知道怎么获取这个event对象吧。

firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。 
在IE/Opera中是window.event，在Firefox中是event；

<script type="text/javascript">
function doSomething (obj,evt) {
var e=(evt)?evt:window.event; //判断浏览器的类型，在基于ie内核的浏览器中的使用cancelBubble
}
</script>

也就是FF系列的必须要传进来，比如在页面中调用这个方法的时候，需要另外传进event来，而IE是全局变量，无需传进来。

<div id="child2" onclick="doSomething(this,event);">

那么用jquery的时候，应该如何来获取event呢？

$("#inputId").bind("click",function(event){
                p=i;
                alert(p+"=="+event.target);
            });

利用jquery，不论在IE上还是FF上，都没有必要必须”从页面上进行传进来了“。

三、event对象有哪些属性或者方法

1、type。事件类型。用来描述这个事件是什么类型的，比如onclick的事件类型为click。

2、srcElement/target：事件源，就是发生事件的元素； FF下是target，IE下是srcElement

比如我要打印下面这句话执行这个方法时候的目标事件源：

<div id="child2" onclick="doSomething(this,event);">
<p>This is child2. Will bubble.</p>
</div>

会弹出：

我就很纳闷，我明明是将这个click时间绑定在了div上了，为何给告诉我事件源是P标签呢？下面我们再来做一个小eg，将上面的html换成：

<div id="child2" onclick="doSomething(this,event);" >
aaaaaaaaaa
</div>

那么现在弹出的结果是

这时候说明我是DIV。原来何为事件源？就是你出发事件的那个元素，并不是你绑定在哪个元素上那个tag。

3、cancelBubble：一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();) 。FF下是后者。

这个地方非常有用。在下一篇文章中我们专门来讲解这个问题。

4、returnValue：一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

5、attachEvent(),detachEvent()/addEventListener(),removeEventListener：为制定DOM对象事件类型注册多个事件处理函数的方法，它们有两个参数，第一个是事件类型，第二个是事件处理函数。在 attachEvent()事件执行的时候，this关键字指向的是window对象，而不是发生事件的那个元素；

6、keyCode。这个不陌生了吧。也非常的常用，用来判断你按下了哪个键

这系列的方法相当有效，动态的绑定、解绑定tag的各种事件，日后我们会讲解。

当然还有其他的一些属性，我这里列出来的都是最常用的。比如还有，button、 clientX/clientY、offsetX,offsetY/layerX,layerY、x,y/pageX,pageY、altKey,ctrlKey,shiftKey、fromElement,toElement、screenX、screenY。

文章转自：http://www.esnsc.com/news632.html