漫谈DOM 事件流的三个阶段
一丶 流
什么是流?
比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现。专业地讲,流是程序输入或输出的一个连续的字节序列;通俗地讲,流是有方向的数据。
二丶 事件流
什么是事件流?
假想一下,现在有一组同心圆,你把手指在最里面的圆心上,与此同时,你也正在指着外层的其他同心圆。假设最里面的圆是 DOM 中的一个按钮,那就是说,你点击按钮这个元素的同时,也点击了他的所有父级元素。那么这个点击事件 DOM 要怎么处理呢?事实上,这个点击事件并非只是简单地在被点击的元素上发生一次。那么点击事件是谁先得到通知并响应呢?
事件捕获
事件捕获就是指被点击元素的父级元素应该先接收到事件,并向下传播,就像例子中的按钮点击事件,接收到事件的元素顺序应该为 window > document > body > button.
事件冒泡
事件冒泡跟事件捕获好顺序相反,认为应该是被点击的具体元素先接受到事件:button > body > document > window.
事件阶段
当一个 DOM 事件发生时,要经历三个阶段:
1. 从文档的根节点流向目标对象 ---> 捕获阶段;
2. 在目标对象上被触发 ---> 目标阶段;
3. 回溯到文档的根节点 ---> 冒泡阶段。
三丶 卵用
通过事件监听(addEventListener(type,callback,true))在父级元素捕获事件,可以阻止事件冒泡(stopPropagation())引起的问题。
四丶总结
事件流描述的就是事件发生的顺序。
事件捕获:所谓捕获,就像是进行一场狩猎一样,以猎人(不是猎头)的角度来看,已经将猎物(发生事件的元素)活动范围(window)确定了,在外面层层包围,然后缩小包围圈,一层一层由外向内的,直至擒获猎物,即传播到事件发生的具体元素。
目标阶段:以猎物本身的角度讲,比如是一头狮子(不是攻城狮),刚开始只是被猎人们包围,但猎人并不确定自己的具体位置,直到猎人的包围圈足够小,才发现自己。这时候自己就真正成为了他们的目标。
冒泡阶段:还是以狮子角度讲,以狮子的性格,即使是困兽犹斗,也不会坐以待毙的,所以它选择突围(冒泡)。然而外面的猎人(父级元素)有很多,它要一层层地突破,直至逃离了狩猎场(window),才有资格嘲笑愚蠢的人类 0.0 。
阻止事件冒泡:然而对狮子而言,结局并不总是那么美好的,因为自嘲愚蠢的家伙 一般都很精明~ 在以上每个阶段进行的过程中,狮子都可能挂掉,假如这是一群装备精良的盗猎者,他们采用了一些空中侦察技术,并在缩小包围圈(事件捕获阶段)的过程中发现了狮子的踪迹,并用激光制导扯弹麻醉了狮子,那么他们大可以提前打卡下班看小学生打第四节比赛了。这样也就不会出现狮子突围的(冒泡阶段)经典剧情了。也就避免了狮子突围可能造成的伤亡~
就写这么多吧,没有? ?又是一波差评来了。。不说了,今天没码是有原因的,赶紧去黑两条吴彦祖~
转载于:https://www.cnblogs.com/Slim-Shady/p/5585922.html
漫谈DOM 事件流的三个阶段相关推荐
- 理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
- DOM事件流三个阶段
DOM事件流三个阶段 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- js事件流的三个阶段
2019独角兽企业重金招聘Python工程师标准>>> js事件流分为三个阶段: 1.事件捕获:当某个元素出发某个事件,顶层对象document就会发出一个事件流, 随着DOM树的节 ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- “约见”面试官系列之常见面试题之第六十一篇之IE和DOM事件流(建议收藏)
什么是"事件流"? 事件流描述的是从页面中接收事件的顺序 事件流的种类: 事件流主要分为三种 事件冒泡流(IE事件流):事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然 ...
- JavaScript-浅谈DOM事件流
什么是事件?(敲黑板) 事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.(by <JavaScript高级程序设计>) 比如鼠标点击,双击,滚动条滑动... 什么是事件流? 先来看一个 ...
- DOM事件流(支持冒泡与不支持冒泡事件)
DOM事件流(event flow )分为以下三个阶段: 事件捕获阶段 事件捕获(event capturing):意思是当鼠标点击或者触发dom事件的时候,浏览器会从这个事件的元素根节点开始一层一层 ...
- 13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录 一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
- 带你理解DOM事件流
在做前端开发的时候,我们经常需要做一些各式各样的交互,如鼠标单击/双击/滑动事件.键盘事件等等等等,这些都是DOM事件.首先我们先看一个概念,叫DOM事件流. DOM事件流 事件流:事件在目标元素和祖 ...
最新文章
- env export set 作用
- pr图形模板预设怎么使用_技术丨PR怎样安装动态图形模板?Pr mac版怎样调用Mogrt预设?Adobe Premiere导入MOGRTs预设完整教程...
- Git和Github的区别与操作简介
- 龙岩学院计算机专业宿舍,龙岩学院的各个学院位置有谁能说下
- 总账分录追溯发票或者付款
- haddler处理队列 netty_Netty的任务队列的Task的三种使用场景
- 为SQL Server 增加链接到SQL Server 的链接服务器
- Inspection工具窗口
- Eclipse下载安装配置测试(超详细)
- 建模方法(二)-组合优化问题的定义
- mysql 索引失效情况总结
- 有哪些盛极一时的互联网产品,现在都没落了?
- qpushbutton设置居中_在右侧对齐图标并将文本居中放置在QPushButton中
- 被互联网租房套路割韭菜的年轻人
- swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果
- deep linux用ntfs,deepin开机挂载ntfs分区和ext4分区教程
- 解决Request processing failed; nested exception is com.sun.jersey.api.client.UniformInterfaceException
- 面试时,可以问面试官问题总结
- Faster_RCNN配置步骤(win7+GTX TITAN X + CUDA7.5)----by jhj
- 「竞品分析报告」不会写?不知从哪收集数据?请收下这篇竞品指南