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,shiftKeyfromElement,toElement、screenX、screenY。

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

原文地址:https://www.cnblogs.com/cfhome/p/2942523.html