专栏首页水击三千浅谈JavaScript的事件(事件对象)

浅谈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             };

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 编写优秀 CSS 代码的 8 个策略

    1qjnmmn gbhjnhbgfsjkgff 编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时...

    企鹅号小编
  • Window环境下搭建Vue.js开发环境

    笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angula...

    Steve Wang
  • JavaScript闭包详解

    JavaScript闭包详解 闭包就是由函数创造的一个词法作用域,里面创建的变量被引用后,可以在这个词法环境之外自由使用(维基百科)。 闭包,官方对闭包...

    Steve Wang
  • 微信小程序+和风天气完成天气预报

    花半天时间完成简单的小程序应用。适合小程序初学者。

    极乐君
  • 给初学者:JavaScript 的常见注意点

    作者: CarterLi 原文:https://segmentfault.com/a/1190000012730162 上篇说了一些 JS 中数组操作的常见误区...

    企鹅号小编
  • JavaScript严格模式

    "use strict" 指令 "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句,但是是一...

    xiangzhihong
  • 在.NET Core 中的并发编程

    原文地址:http://www.dotnetcurry.com/dotnet/1360/concurrent-programming-dotnet-core 今...

    企鹅号小编
  • JavaScript字符串“三剑客”

    JavaScript字符串方法有很多,其中有三个方法与字符串裁剪有关,他们分别是slice()、substring()和substr(),我把他们统称为“三剑客...

    企鹅号小编
  • 应用广泛的语言ECMAScript 2018来了,新特性都在这里

    原文:What’s new in ECMAScript 2018 作者:Paul Krill 翻译:不二 译者注:ECMAScript是应用广泛的语言,它常常被...

    企鹅号小编
  • 《笨办法学Python》 第41课手记

    《笨办法学Python》 第41课手记 本节课的代码有168行,但是冗长不代表困难,只是print里面的游戏说明内容太多,整体来说是很容易的,你要锻炼自己的耐心...

    Steve Wang

扫码关注云+社区

领取腾讯云代金券