浅谈JavaScript的事件(事件对象)

Posted 水击三千

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈JavaScript的事件(事件对象)相关的知识,希望对你有一定的参考价值。

  在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中,会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象,但支持方式不同。

  • DOM中的事件对象

  兼容dom的浏览会将一个event对象传递到事件处理程序中。

1 var aa=document.getElementById("aa");
2             aa.onclick=function(event){
3                 console.log(event.type);
4             }
5             aa.addEventListener("click",function(event){
6                 console.log(event.type);
7             },false);

  上面的代码,通过两种方式指定事件处理程序,但是他们可以获得event对象。event.type都是输出click。

属性/方法

类型

读/写

说明

bubbles

Boolean

只读

事件是否冒泡

cancelable

Boolean

只读

是否可以取消事件的默认行为

currentTarget

Element

只读

事件处理程序正在处理的那个元素

defaultPrevented

Boolean

只读

是否已经调用了preventDefault方法

detail

Integer

只读

事件的细节信息

eventPhase

Integer

只读

调用事件处理程序的阶段

preventDefault()

Function

只读

取消事件的默认行为

stopImmediatePropagation()

Function

只读

取消事件的进一步捕获或者冒泡

stopPropagation()

Function

只读

取消事件的进一步冒泡或者捕获

target

Element

只读

事件的目标

trusted

Boolean

只读

为true表示事件是浏览器生成,false表示javascript添加

type

String

只读

被触发事件的类型

view

AbstarctView

只读

与事件关联的抽象视图

  上面的表格列出了event的属性以及方法,在事件处理程序内部,对象this始终等于currentTarget的值,而target则包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、target和currentTaget包含相同的值。

1 aa.addEventListener("click",function(event){
2                 console.log(event.target==this);//true
3                 console.log(event.currentTarget==this);//true
4             },false);

  上面的代码中说明currentTarget、target和this的值是相同的。通过下面的代码,我们可以看出this就是指向元素本身。

1 aa.addEventListener("click",function(event){
2                 //console.log(event.target==this);//true
3                 //console.log(event.currentTarget==this);//true
4                 console.log(this==document.getElementById("aa"));//true
5                 console.log(event.currentTarget==document.getElementById("aa"));//true
6             },false);

  要阻止特定事件的默认行为,可以使用preventDefault方法。例如a标签,在点击的时候,会跳转到指定的url链接,如果想阻止该行为的发生,可以调用preventDefault方法。

1 document.getElementById("hh").onclick=function(event){
2                 event.preventDefault();
3             }

  上面的代码将会阻止跳转事件的发生。只有cancelable为true,才能调用该方法。通过调用stopPropagation方法能够阻止事件的冒泡。

 1 document.getElementById("hh").onclick=function(event){
 2                 console.log(event.eventPhase);//2
 3                 event.preventDefault();
 4             }
 5             document.body.onclick=function(event){
 6                 console.log(event.eventPhase);//3
 7             }
 8             document.body.addEventListener("click",function(event){
 9                 console.log(event.eventPhase);//1
10             },true);

  上面的代码中输出是1,2,3。由此可见,document.body.addEventListener最先执行,它发生在事件的冒泡阶段,document.getElementById("hh")第二个执行,发生在事件的处理程序目标阶段。document.body.onclick发生在事件的冒泡阶段。

  • IE中的事件对象

  在IE中方式event对象可以通过多种方式,取决于指定事件处理程序的方法。

1 aa.onclick=function(){
2                 var event=window.event;
3                 console.log(event.type);
4             }

  上面的代码,我们通过window.event获取了event对象,并且可以取得它的属性和方法。但是如果通过attachEvent添加事件,则事件处理程序会传递一个event对象。

  IE的event对象同样包含创建它的相关属性和方法,与DOM事件一样,也会因为事件类型的不同而不同。

属性/方法

类型

读写

说明

cancelBubble

Boolean

读/写

默认false,设置为true,取消事件冒泡

returnValue

Boolean

读/写

默认为true,设置为false,取消事件的默认行为

srcElement

Element

只读

事件的目标,与target相同

  因为事件处理程序的指定方式不同,故它的作用域也不相同。最好不用this,可以使用srcElement来获取元素。

  如前所述,returnValue属性相当于DOM中的preventDefault方法,它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false,就会阻止默认事件的发生。

1 EventUtil.addEvent(document.getElementById("hh"),"click",function(event){
2                 event.returnValue=false;
3             });
  • 跨浏览器的事件对象

  虽然DOM与IE的event对象不同,但是可以通过js库,来解决浏览器的兼容性。

  

 1 var EventUtil={
 2                 /**
 3                  * 添加事件
 4                  * @param {Object} element:元素本身
 5                  * @param {Object} type:事件名称
 6                  * @param {Object} fn:事件处理程序
 7                  */
 8                 addEvent:function(element,type,fn){
 9                     if(element.addEventListener){
10                         element.addEventListener(type,fn,false);
11                     }
12                     else if(element.attachEvent){
13                         element.attachEvent("on"+type,fn);
14                     }
15                     else{
16                         element["on"+type]=fn;
17                     }
18                 },
19                 /**
20                  * 移除事件
21                  * @param {Object} element:元素本身
22                  * @param {Object} type:事件名称
23                  * @param {Object} fn:事件处理程序
24                  */
25                 removeEvent:function(element,type,fn){
26                     if(element.removeEventListener){
27                         element.removeEventListener(type,fn,false);
28                     }
29                     else if(element.detachEvent){
30                         element.detachEvent("on"+type,fn);
31                     }
32                     else{
33                         element["on"+type]=null;
34                     }
35                 },
36                 /**
37                  * 获取事件对象
38                  * @param {Object} event
39                  */
40                 getEvent:function(event){
41                     return event||window.event;
42                 },
43                 /**
44                  * 获取事件处理程序作用的目标元素
45                  * @param {Object} event
46                  */
47                 getTarget:function(event){
48                     return event.currentTarget||event.srcElement;
49                 },
50                 /**
51                  * 取消默认行为
52                  * @param {Object} event
53                  */
54                 preventDefault:function(event){
55                     if(event.preventDefault){
56                         event.preventDefault();
57                     }
58                     else{
59                         event.returnValue=false;
60                     }
61                 },
62                 /**
63                  * 取消冒泡
64                  * @param {Object} event
65                  */
66                 stopPropagation:function(event){
67                     if(event.stopPropagation){
68                         event.stopPropagation();
69                     }
70                     else{
71                         event.cancelBubble=true;
72                     }
73                 }
74             };

  上面的代码封装了事件处理中需要的方法,包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。

以上是关于浅谈JavaScript的事件(事件对象)的主要内容,如果未能解决你的问题,请参考以下文章

浅谈JavaScript的事件(事件委托)

浅谈Javascript事件模拟

浅谈JavaScript的事件(事件流)

浅谈JavaScript的事件(事件类型)

浅谈JavaScript的事件(事件处理程序)

浅谈js冒泡事件1