摘要：目标阶段事件对象到达事件对象的事件目标。如果事件类型指示事件不冒泡，则事件对象将在完成此阶段之后停止。气泡阶段事件对象以相反顺序传播目标的祖先，从的父对象开始，并以窗口结束。涉及到事件委托时这两个所指的元素才会不一样参考等级概述事件流
DOM
DOM(Document Object Model) 全称文档对象模型. 文档可以是HTML, XML, 或者XHTML文档.DOM定义 的是一组与平台和语言的接口. 目前形成了三个演进的标准, DOM Level 1, DOM Level 2, DOM Level 3. 每个新的Level都是在原有的基础之上增加了新的接口.
可以看到, 在DOM level 2里引入了事件, 主要有EventTarget, Mouse等接口. DOM level 2里主要引入了键盘事件.
Event事件流
监听器 target.addEventListener(type, listener[, useCapture])的第三个参数useCapture, 类型为布尔, 默认为false,表示事件触发使用冒泡流. 先触发内层元素的监听器, 再触发外层元素的监听器. useCapture取值为true时, 将先触发外层元素的监听器, 再触发内层元素的监听器.
根据DOM2级事件规定
共有三个事件阶段：捕获阶段、目标阶段和气泡阶段。如在 dispatch之前调用stopPropagation() , 则将跳过所有阶段
捕获阶段：事件对象通过目标的祖先从窗口传播到目标的父对象。这个阶段也被称为捕获阶段。
目标阶段：事件对象(event object)到达事件对象的事件目标(event target)。这个阶段也被称为at-target阶段。如果事件类型指示事件不冒泡，则事件对象将在完成此阶段之后停止。
气泡阶段：事件对象以相反顺序传播目标的祖先，从event target的父对象开始，并以窗口结束。这个阶段也称为冒泡阶段。
配合代码理解. 此处我们点击的
Document
如果我们点击btn,也可以视为同时点击了btn的容器元素, 甚至单击了整个页面. 因为我们于每一级元素都添加了监听器, 控制台打印结果如下.
Event相关易混淆关键词
eventTarget / event.Target
能用addEventListener方法添加事件监听器的对象都是eventTarget.
Element，document 和 window 是最常见的eventTarget.
event.target, 是触发当前事件的最小单位元素.
event.currentTarget / event.Target
event.target返回触发事件的元素;event.currentTarget返回绑定事件的元素
具体的说就是event.currentTarget是注册事件时所指向的元素，而event.target是响应事件的最小子元素，也就是最深层级的触发事件的元素。
涉及到事件委托时, 这两个所指的元素才会不一样.
参考:
https://www.cnblogs.com/johnn... DOM等级概述
https://www.w3.org/TR/DOM-Lev... W3C事件流
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96192.html
-
摘要：事件流指的是从页面接收事件的顺序。级事件规定方法的第三个参数设为，表示事件在捕获阶段触发。目前支持事件捕获流的浏览器有，，，，。事件流根据级事件规定，事件流应该包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。
什么是事件？（敲黑板）
事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。（by 《JavaScript高级程序设计》）比如鼠标点击，双击，滚动条滑动...
什么是事件...
-
摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。
本文主要解决两个问题：
什么是事件流
DOM事件流的三个阶段
起因
在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...
-
摘要：本文主要解决两个问题什么是事件流事件流的三个阶段起因在学习前端的大半年来，对事件了解甚少。事件流所描述的就是从页面中接受事件的顺序。事件流事件流包括三个阶段。防止事件冒泡而带来不必要的错误和困扰。分有事件冒泡与事件捕获两种。
本文主要解决两个问题：
什么是事件流
DOM事件流的三个阶段
起因
在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。...
-
摘要：但对于整个事件流上的别的元素来说，执行顺序还会受到另外一个因素的影响。以上面的场景为例，在捕获阶段执行的事件，如果执行，则事件流终止，不会到达目标阶段，的世界则不会被执行执行结果为线上参考事件流
向dom绑定事件的事件的三种方式
行内绑定
按钮
js内绑定
btnDom.onclick = function clickHandler() {
console.log(click)...
Anleb
评论0
收藏0
-
摘要：事件捕获提出的事件流模型称为事件捕获。事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。
首先我们思考一个很有意思的事情：一张纸上画了两个同心圆，当我们把手指放到圆心上时，手指指向的不是一个圆，而是纸上的两个圆，同理之，当我们单击网页上的一个div...
-
摘要：处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时，会产生一个事件对象。
js 是采用异步事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。事件源：产生事件的地方（html元素，窗口，其他等等)；事件：鼠标事件，键盘...
