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 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
javascript回到顶部特效
Jul 30 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
详解Vue之事件处理
Jul 10 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 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 strcmp使用说明
2010/04/22 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python处理中文标点符号大集合
2018/05/14 Python
django加载本地html的方法
2018/05/27 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
Python实现排序方法常见的四种
2021/07/15 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL