JS Event Propagation (bubbling and capture)

事件传播是双向的(bidirectional), 先从DOM树的根元素(window)到事件目标元素(event target), 接着从事件事件目标元素回到DOM树的根元素. 整体可以分为下面三个阶段:

从根元素到事件目标父元素: 称之为事件捕获阶段(event capture phase)
事件目标自己: 称之为目标阶段(target phase)
从目标父元素到根元素: 称之为事件冒泡阶段(event bubble phase)

Capture Phase
- el.addEventListener(‘click’, listener, true)
- Target Phase
Bubble Phase
- el.addEventListener(‘click’, listener, false)
- el.addEventListener(‘click’, listener) // 第三个参数默认是false

Note: 某些事件比如 blur, focus, load 不会在冒泡阶段(bubble phase)出现, 也就是说这些事件只会在捕获阶段(capture phase)被捕获, 因此在这些事件控制上, addEventListener 函数的第三个参数必须设定为 true 否则无法执行回调函数.

JS Event Propagation (bubbling and capture)相关推荐

Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
Js Event Loop
Js Event Loop 本文主要介绍 Node 中的事件循环参考官网 (什么是 Event Loop? - 阮一峰的网络日志 (ruanyifeng.com)) What is the Eve ...
彻底理解 JS Event Loop（浏览器环境）
最近罗列了一些软件开发基础知识点,计划逐一的.彻底的理解每一个知识点,并为每个知识点写一篇详细的,图文并茂的文章.这篇是关于浏览器环境下 JS 的 Event Loop 机制(如有错误,欢迎指出). ...
JS Event对象详解
JS Event对象详解参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态,比如事 ...
Day25 - Event Capture, Propagation, Bubbling and Once
本文出自:春哥个人博客:http://www.liyuechun.org 作者:©黎跃春-追时间的人简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战.项目免费提供了 30 ...
JS Event handler example - event capture and bubble
Created by Jerry Wang, last modified on Jun 06, 2015 source link: http://www.ido321.com/1570.html 这个 ...
jsevent(js event对象)
javascript event对象的具体功能是什么 event对象只在事件发生的过程中才有效(比如鼠标点击,键盘按下等). event对象用以表示事件的状态, 触发event对象的元素(event. ...
IE8及其以下,特有js event对象坑
简介: event 对象是 JavaScript 中一个非常重要的对象,用来表示当前事件.event 对象的属性和方法包含了当前事件的状态. 当前事件,是指正在发生的事件:状态,是与事件有关的性质,如 ...
JavaScript: 最简单的事件代理（JS Event Proxy）原理代码
打开 http://jsbin.com (JS练兵场),方便尝试使用案例代码. 假设有HTML <ul id="parent-list"><li id=" ...

JS Event Propagation (bubbling and capture)

JS Event Propagation (bubbling and capture)相关推荐

最新文章

热门文章