文档章节

JavaScript的事件监听与捕获和冒泡

IanSun
 IanSun
发布于 2015/03/14 21:54
字数 1029
阅读 76
收藏 0

在前端开发中,我们经常需要对某些事件进行监听。这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作。

而js中事件监听方法总共有三种,分别如下所示:

  • element.addEventListener(type, listener[, useCapture]); // IE6~8不支持

  • element.attachEvent(’on’ + type, listener); // IE6~10,IE11不支持

  • element[’on’ + type] = function(){} // 所有浏览器

demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

参数含义:

type:事件类型

listener:事件触发后的回调函数

useCapture:是否使用捕获,如果值为true, useCapture 表示用户希望发起捕获。 在发起捕获之后, 只要Dom子树下发生了该事件类型,都会先被该事件监听器捕获,然后再被派发到Dom子树中的事件监听器中。并且向上冒泡的事件不会触发那些发起捕获的事件监听器。进一步的解释可以查看 DOM Level 3 Events 文档。 useCapture 默认值为false 。

addEventListener是W3C工作组在DOM Level 2开始引入的一个注册事件监听器的方法;而在此之前,传统的事件监听方法是通过element[’on’ + type]的方式来注册的。它们两之间的主要区别是,element[’on’ + type]的方式无法使用事件捕获,并且element[’on’ + type]不支持对同一个元素的同一个事件注册多个事件监听器。如下面的例子所示,元素被点击后只会输出1,而不会输出0和1.

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

然而addEventListener方法在IE6~8的浏览器中不被支持。那么在低版本的IE中怎么来为同一个事件注册多个事件监听器呢?原来IE从IE5.0系列开始就引入了attachEvent()方法来支持这一特性。但遗憾的是该方法也不支持事件捕获。并且从IE 11开始,这个方法已经被弃用。

谈谈事件的捕获和冒泡

enter image description here

W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。事件对象按照上图的传播路径依次完成这些阶段。如果某个阶段不支持或事件对象的传播被终止,那么该阶段就会被跳过。举个例子,如果Event.bubbles属性被设置为false,那么冒泡阶段就会被跳过。如果Event.stopPropagation()在事件派发前被调用,那么所有的阶段都会被跳过。

  • 捕获 阶段:在事件对象到达事件目标之前,事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。

  • 目标 阶段:事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标,该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。

  • 冒泡 阶段: 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

在一个事件完成了所有阶段的传播路径后,它的Event.currentTarget会被设置为null并且Event.eventPhase会被设为0。Event的所有其他属性都不会改变(包括指向事件目标的Event.target属性)

<script src="http://htmljs.b0.upaiyun.com//js/tuiku.js"></script>


本文转载自:http://www.codeceo.com/article/javascript-event-catch-bubble.html

IanSun
粉丝 9
博文 20
码字总数 227
作品 0
昆山
CTO(技术副总裁)
私信 提问
温故js系列(10)-事件event

前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:Event JavaScript-事件event JavaScript中,事件一般是指浏览器和用户操...

xzavier
2018/08/27
0
0
javascript撸来撸去(1)-事件监听与对象属性

本坑开始新的系列记录,该记录是回顾这么多年以来学习到javescript知识以及通过这种让自己更加独立的审视相关基础能力和方式方法,系列文章记录的内容都会有以下特点: 这篇文章围绕事件监听...

ziven先生
2017/12/28
0
0
JS和JQ的event对象对比和应用

currentTarget 事件冒泡阶段所在的DOM target, originalTarget原始的DOM 代码测试: 结果分析: 总结: js的event参数中,不管是, , 都是指向第一个触发事件的元素(还没冒泡),而在click事...

前端届的科比
2014/08/11
0
0
android多点触摸手势&手势库GestureLibraries

一.手势事件的监听方式 1.使用 onTouchEvent事件监听器或者使用 setOnTouchEventListener监听触摸事件 2.事件类型的判断 event.getAction()或者event.getActionMask(),注意,前者包含后者,后...

IamOkay
2014/12/17
0
0
javaScript事件(一)事件流

javaScript事件(一)事件流 一、事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间的桥梁。 你若触发,我便执行——事件发生...

蜗牛奔跑
2015/06/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C 语言 二级指针操作文件 柔性数组使用

#include <stdio.h>#include <stdlib.h>#include <string.h>typedef struct _info* pInfo;struct _info{int line;int len;char data[0];}info;int getFil......

小张525
28分钟前
0
0
中介者模式

https://blog.csdn.net/jason0539/article/details/45216585

南桥北木
28分钟前
0
0
抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
今天
1
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部