- 在JavaScript中，事件流指的是DOM事件流。
- 当一个事件发生时，不仅产生事件的元素响应，其他的元素也会响应。
- 由于DOM模型是一个树状结构，其中的HTML元素上产生一个事件时，该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播，路径所经过的节点都会收到该事件，这个过程就是DOM的事件流。
- 按照传播方向的不同，DOM事件流有两种方式：冒泡事件和捕获事件
冒泡事件
- 在JavaScript中，默认使用冒泡事件。
- 当事件在某一元素上触发时，事件将沿着整个节点的父节点自下而上穿过多个DOM节点，就像冒泡一样，所以这种方式称为冒泡事件。
- 在冒泡的过程中，在任何时候都可以终止事件的冒泡。如果不终止冒泡，事件流会沿着DOM节点一直向上直至DOM的根节点。
- 例如：给<div>绑定一个单击事件，给<div>里的<a>也绑定一个单击事件，给<div>外的<body>也绑定一个单击事件，当<a>的单击事件触发时，事件会从<a>流向<div>，然后流向<body>，<div>和<body>的单击事件也会被触发
- 所谓的冒泡事件就是事件向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的，如果不希望发生冒泡事件，可以通过事件对象来取消冒泡事件（将事件对象的属性cancelBubble设置为true，即可取消冒泡）
捕获事件
- 与冒泡事件相反，在捕获事件中，事件的传播将从DOM树的根节点开始，而不是从触发事件的目标元素开始。
- 事件是从目标元素的所有祖先元素依次向下传递。
- 在这个过程中事件会从DOM树的根元素到事件目标元素之间各个继承之间的元素所捕获。
- 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。
- 一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false
事件传导的三个阶段
- 关于事件的传导网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传导，也就是说事件应该在冒泡阶段执行
- 网景公司认为事件应该是由外向内传导的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代
- W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕捉阶段
事件将沿着DOM树向下传递，经过目标节点的每一个祖先节点，直到目标节点。例如：用户单击了一个超链接<a>，则该单击事件将从document节点转送到HTML元素、body元素以及包含超链接的div元素。<a>就是目标节点。IE8及以下的浏览器没有捕获阶段
2.目标阶段
在次阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行该事件监听器
3.冒泡阶段
事件将沿着DOM树向上传递，再逐次访问目标元素的祖先节点直到documentj节点。该过程的每一步，浏览器都会执行那些不是捕捉事件监听器的事件监听器（EventListener）
扫一扫
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
