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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
详解各版本React路由的跳转的方法
May 10 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
原生js实现购物车
2020/09/23 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
幼儿教师自我鉴定
2013/11/02 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
nginx请求限制配置方法
2021/07/09 Servers