与dom事件流相关的二三事

Anleb 发布于2019-08-23 12:54 / 1778人阅读

摘要：但对于整个事件流上的别的元素来说，执行顺序还会受到另外一个因素的影响。以上面的场景为例，在捕获阶段执行的事件，如果执行，则事件流终止，不会到达目标阶段，的世界则不会被执行执行结果为线上参考事件流

向dom绑定事件的事件的三种方式

行内绑定

js内绑定

btnDom.onclick = function clickHandler() {
    console.log("click");
}

事件监听器绑定

btnDom.addEventListener("click", e => {
    console.log("click");
})

DOM事件流

什么是DOM事件流？

DOM结构是一个树形结构，当一个DOM元素产生一个事件，该事件会在当前节点与根节点之间的路径传播，路经的所有节点都会接收到该事件，这就是DOM事件流

DOM事件流的三个阶段

捕获阶段（capture）：从ducoument流向目标节点

目标阶段: 到达

冒泡阶段：从目标阶段冒泡到document节点

关于这三个阶段的流程，文档上有个图片，描述的十分详细

事件的执行顺序

对于target来说，事件执行，一直会在目标阶段。但对于整个事件流上的别的元素来说，执行顺序还会受到另外一个因素的影响。

我们来看一个例子，首先dom结构如下

为其绑定事件

fa.addEventListener("click", e => {
  console.log("click fa")
})

ch.addEventListener("click", e => {
  console.log("click ch")
})

此时点击ch，打印出的结果是

"click ch"
"click fa"

先执行了ch的事件，后执行了fa的事件，因此我们可以得知，fa的事件，是在冒泡阶段被执行的。

addEventListener方法，可以传入第三个参数，useCapture，boolean，来决定这个执行阶段。默认为false，也就是在冒泡阶段，如果设置为true，则会在捕获阶段

fa.addEventListener("click", e => {
  console.log("click fa")
}, true)

ch.addEventListener("click", e => {
  console.log("click ch")
}, true)

执行结果为

"click fa"
"click ch"

stopPropagation

在事件流的任何一个事件，都可以调用event的stopPropagation方法，来停止事件流。以上面的场景为例，在捕获阶段执行fa的事件，如果执行stopPropagation，则事件流终止，不会到达目标阶段，ch的世界则不会被执行

fa.addEventListener("click", e => {
  console.log("click fa")
  e.stopPropagation();
}, true)

ch.addEventListener("click", e => {
  console.log("click ch")
}, true)

执行结果为

"click fa"

线上demo

demo

参考

事件流

专线服务私有云 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99086.html

前端渲染过程的二三事

摘要：前端渲染过程的二三事本文不会介绍整个前端渲染过程的步骤，只是记录最近阅读的文章的些许思考和感悟。那么现在我们可以明白这个问题的关键所在了，因为在大部分页面中是拥有的，而由于其解析顺序，那么在事件之前必定已经成功构造树。前端渲染过程的二三事本文不会介绍整个前端渲染过程的步骤，只是记录最近阅读的文章的些许思考和感悟。（文章地址一（系列）,文章地址二）希望大家在阅读这篇文章之前能将上述...

Rindia 2019-08-23 13:03 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
数组方法的二三事

摘要：常用的数组方法删除数组的最后一个元素，返回被删除的元素，原数组长度减。原数组发生了变化，但没有创建新的数组。将指定数组进行排序，返回排好序的数组。颠倒数组元素的顺序，返回逆序后的数组。数组，对于每一个前端人员来说是非常常见且重要的数据结构之一，也是面试常常出现的题目，掌握数组的方法能帮助我们更高效地处理问题。不过在数组的学习中，我们常常会混淆数组本身的方法和Javascript提供的...

VincentFF 2019-08-23 14:37 评论0 收藏0
分表后需要注意的二三事

摘要：分表字段的选择。问题产生之前提到在分表应用上线前我们需要将原有表的数据迁移到新表中，这样才能保证业务不受影响。虽说凌晨的业务量下降，但依然有少部分的请求过来，也会出现各种数据库异常。 showImg(https://segmentfault.com/img/remote/1460000019462791?w=496&h=285); 前言本篇是上一篇《一次分表踩坑实践的探讨》，所以还没...

dongxiawu 2019-08-19 11:43 评论0 收藏0