理解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 相关文章推荐
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
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
PHP5 面向对象程序设计
2008/02/13 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
js定时器实例分享
2016/12/20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
vuex实现购物车功能
2020/06/28 Javascript
python3实现暴力穷举博客园密码
2016/06/19 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
解读python logging模块的使用方法
2018/04/17 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
物业电工岗位职责
2013/11/20 职场文书
电脑教师的自我评价
2013/12/18 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
工作态度不好检讨书
2015/05/06 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
导游词之广西漓江
2019/11/02 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android