JavaScript事件 "事件对象"的注意要点


Posted in Javascript onJanuary 14, 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,在那里事件才能得到处理。

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;
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()来取消其默认行为。

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、如果是捕获阶段则等于1;
2、如果是目标对象阶段则等于2;
3、如果是冒泡阶段则等于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 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
优秀公益广告词大全
2014/03/19 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
员工趣味活动方案
2014/08/27 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书