理解JavaScript事件对象


Posted in Javascript onJanuary 25, 2016

在触发DOM上的某个事件时,会产生一个事件对象event。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样,可用的属性方法就不一样。不过,所有的事件都会有下表列出的成员。

下面列出了 2 级 DOM 事件标准定义的属性:

  • bubbles: 返回布尔值,指示事件是否是起泡事件类型。
  • cancelable: 返回布尔值,指示事件是否可拥可取消的默认动作。
  • currentTarget: 返回其事件监听器触发该事件的元素。
  • eventPhase: 返回事件传播的当前阶段。
  • target: 返回触发此事件的元素(事件的目标节点)。
  • timeStamp: 返回事件生成的日期和时间。
  • type: 返回当前 Event 对象表示的事件的名称。

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

  • initEvent(): 初始化新创建的 Event 对象的属性。
  • preventDefault(): 通知浏览器不要执行与事件关联的默认动作。
  • stopPropagation(): 不再派发事件。

this、target、currentTarget

在事件处理程序的内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。如:

var btn = document.querySelector("#btn");
btn.onclick=function () {
  console.log(event.currentTarget === this); //true
  console.log(event.target === this); //true
}

由于click事件的目标是btn按钮,所以这三个值是相等的。如果事件处理程序在按钮的父节点(document.body)中,那么这些值则不相同。如:

var btn = document.querySelector("#btn");
document.body.onclick=function () {
  console.log(event.currentTarget === document.body); //true
  console.log(this === document.body); //true
  console.log(event.target === btn); //true 因为btn没有注册事件处理程序,所以该click事件就冒泡到了document.body
}

在这里,this和currentTarget都是document.body,因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素,因为它是click事件的真正目标。由于按钮并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才能得到处理。

1、type

在需要通过一个函数处理多个事件时,可以使用type属性。如:

//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  switch (event.type) {
    case "click":
      console.log("i click it");
      break;
    case "mouseover":
      console.log("i enter it");
      break;
    case "mouseout":
      console.log("i leave it");
      break;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2、preventDefault()

要阻止特定事件的默认行为,可以使用该方法。如:

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

以上代码即屏蔽了网页上全部的a标签超链接功能。要注意的是,只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。

3、stopPropagation()

立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用该方法,从而避免触发注册在document.body上面的事件处理程序。如:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  // event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果:
//btn clicked
//clicked

又如:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果:
//btn clicked

eventPhase

该属性用来确定事件当前正位于事件流的哪个阶段。

  • 如果是捕获阶段则等于1;
  • 如果是目标对象阶段则等于2;
  • 如果是冒泡阶段则等于3;

如:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段,实际上属于冒泡阶段(在btn上)

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段(在body上)

又如:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //1
  console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
  console.log(event.eventPhase); //2
  console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //3
  console.log(event.currentTarget); //HTMLBodyElement
});

流程大概是:

document.body 捕获阶段 --> btn 目标对象阶段 --> document.body 冒泡阶段

以上就是关于JavaScript事件对象,希望对大家的学习有所帮助。

Javascript 相关文章推荐
window.ActiveXObject使用说明
Nov 08 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 #Javascript
学习JavaScript事件流和事件处理程序
Jan 25 #Javascript
javascript产生随机数方法汇总
Jan 25 #Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 #Javascript
理解JavaScript表单的基础知识
Jan 25 #Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 #Javascript
JavaScript数组的一些奇葩行为
Jan 25 #Javascript
You might like
PHP使用CURL模拟登录的方法
2015/07/08 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
爬山算法简介和Python实现实例
2014/04/26 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
企业行政文员岗位职责
2013/12/03 职场文书
护士演讲稿范文
2014/01/05 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2015年司法所工作总结
2015/04/27 职场文书
孟佩杰观后感
2015/06/17 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android