浏览器事件：为什么会有捕获过程和冒泡过程？
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。这一节课，我们进入了浏览器的部分，一起来学习一下事件。
事件概述
在开始接触具体的 API 之前，我们要先了解一下事件。一般来说，事件来自输入设备，我们平时的个人设备上，输入设备有三种：
键盘；
鼠标；
触摸屏。
这其中，触摸屏和鼠标又有一定的共性，它们被称作 pointer 设备，所谓 pointer 设备，是指它的输入最终会被抽象成屏幕上面的一个点。但是触摸屏和鼠标又有一定区别，它们的精度、反应时间和支持的点的数量都不一样。
我们现代的 UI 系统，都源自 WIMP 系统。WIMP 即 Window Icon Menu Pointer 四个要素，它最初由施乐公司研发，后来被微软和苹果两家公司应用在了自己的操作系统上（关于这个还有一段有趣的故事，我附在文末了）。
WIMP 是如此成功，以至于今天很多的前端工程师会有一个观点，认为我们能够“点击一个按钮”，实际上并非如此，我们只能够点击鼠标上的按钮或者触摸屏，是操作系统和浏览器把这个信息对应到了一个逻辑上的按钮，再使得它的视图对点击事件有反应。这就引出了我们第一个要讲解的机制：捕获与冒泡。
捕获与冒泡
很多文章会讲到捕获过程是从外向内，冒泡过程是从内向外，但是这里我希望讲清楚，为什么会有捕获过程和冒泡过程。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
浏览器事件机制包括捕获和冒泡过程，捕获是计算机处理事件的逻辑，而冒泡是人类理解事件的思维。在实际监听事件时，建议默认使用冒泡模式，但在开发组件时，需要父元素控制子元素的行为时，可以使用捕获机制。焦点系统控制键盘事件，而自定义事件可以在特定元素上触发。文章还提到了WIMP系统的由来，以及乔布斯和盖茨对其设计的争议。整体而言，本文介绍了浏览器事件的基本概念和相关API的使用，以及一些有趣的历史故事。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(24)
- 最新
- 精选
令狐洋葱老师对于这类历史还是有一些了解的哈，不知道这类知识哪里获取的，是想了解就去搜索的么？作者回复: 前面有讲学习方法
2019-08-151
🔅fighting🔅01：UI事件，load，unload判断页面是都加载完成； 02：焦点事件，focus，blur 03：鼠标事件，click，dbclick，mousedown，mouseup，scroll 04：键盘事件 keydown，keyup，keypress，textInput，2019-08-16114
阿成事件的种类对应了浏览器的能力，我们并不需要记住所有的事件及其细节，我们只需要在用到某种能力的时候去查找相应的事件类型下的某一事件即可。 补充一下楼下仁兄的答案：移动端设备上的touch系列，以及新标准(好像也挺多年了，不过兼容性让人望而却步...)的pointer系列2019-04-1613
injser评论越来越少...果然贵在坚持2019-05-30411
zgy冒泡和捕获就好比蛛网和昆虫，蜘蛛通过蛛网晃动捕获昆虫位置，昆虫挣扎晃动蛛网将位置传给蜘蛛。2021-06-0116
bestRktnZnnn请问自定义事件主要应用场景是什么呢2019-05-2336
Evenhttps://developer.mozilla.org/zh-CN/docs/Web/Events 直接看MDN2019-04-265
junjun感觉讲的最好和实际应用联系起来，不然完全看不出有什么意义，毕竟最后还是为了应用。2019-10-0914- james事件触发的顺序总是 先从外向内捕获，然后再从内向外冒泡 我们的心智模型是习惯于从内向外冒泡 01：UI事件：load，unload判断页面是都加载完成； 02：焦点事件：focus，blur 03：鼠标事件：click，dbclick，mousedown，mousemove，mouseup，scroll 04：键盘事件：keydown，keyup，keypress，textInput2020-06-201
马成事件触发的顺序总是 先从外向内捕获，然后再从内向外冒泡2019-09-051
收起评论