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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
Nuxt 项目性能优化调研分析
Nov 07 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入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Python实现单词拼写检查
2015/04/25 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python 列表反转显示的四种方法
2020/11/16 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
介绍一下常见的木马种类
2014/11/15 面试题
教师研修随笔感言
2014/01/23 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
Java并发编程必备之Future机制
2021/06/30 Java/Android