理解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调用
Jun 24 Javascript
javascript生成随机数的方法
May 16 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
百度地图API使用方法详解
2015/08/25 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python小技巧之批量抓取美女图片
2014/06/06 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python用SSH连接到网络设备
2021/02/18 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
新员工辞职信范文
2015/05/12 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server