重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后，你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起，重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一：JavaScript (15讲)
JavaScript类型：关于类型，有哪些你不知道的细节？
JavaScript对象：面向对象还是基于对象？
JavaScript对象：我们真的需要模拟类吗？
JavaScript对象：你知道全部的对象分类吗？
JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
JavaScript执行（二）：闭包和执行上下文到底是怎么回事？
JavaScript执行（三）：你知道现在有多少种函数吗？
JavaScript执行（四）：try里面放return，finally还会执行吗？
JavaScript词法：为什么12.toString会报错？
（小实验）理解编译原理：一个四则运算的解释器
JavaScript语法（预备篇）：到底要不要写分号呢？
JavaScript语法（一）：在script标签写export为什么会抛错？
JavaScript语法（二）：你知道哪些JavaScript语句？
JavaScript语法（三）：什么是表达式语句？
JavaScript语法（四）：新加入的**运算符，哪里有些不一样呢？
模块二：HTML和CSS (16讲)
HTML语义：div和span不是够用了吗？
HTML语义：如何运用语义类标签来呈现Wiki网页？
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
HTML元信息类标签：你知道head里一共能写哪几种标签吗？
CSS 选择器：如何选中svg里的a元素？
CSS选择器：伪元素是怎么回事儿？
HTML链接：除了a标签，还有哪些标签叫链接？
CSS排版：从毕升开始，我们就开始用正常流了
HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？
HTML小实验：用代码分析HTML标准
CSS Flex排版：为什么垂直居中这么难？
CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？
HTML语言：DTD到底是什么？
CSS渲染：CSS是如何绘制颜色的？
CSS小实验：动手做，用代码挖掘CSS属性
HTML·ARIA：可访问性是只给盲人用的特性么？
模块三：浏览器实现原理与API (9讲)
浏览器：一个浏览器是如何工作的？（阶段一）
浏览器：一个浏览器是如何工作的？（阶段二）
浏览器：一个浏览器是如何工作的（阶段三）
浏览器：一个浏览器是如何工作的？（阶段四）
浏览器：一个浏览器是如何工作的？（阶段五）
浏览器DOM：你知道HTML的节点有哪几种吗？
浏览器CSSOM：如何获取一个元素的准确位置
浏览器事件：为什么会有捕获过程和冒泡过程？
浏览器API（小实验）：动手整理全部API
模块四：前端综合应用 (5讲)
性能：前端的性能到底对业务数据有多大的影响？
工具链：什么样的工具链才能提升团队效率？
持续集成：几十个前端一起工作，如何保证工作质量？
搭建系统：大量的低价值需求应该如何应对？
前端架构：前端架构有哪些核心问题？
特别加餐 (9讲)
新年彩蛋 | 2019，有哪些前端技术值得关注？
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {}，两种写法有什么区别吗？
答疑加餐 | 学了这么多前端的“小众”知识，到底对我有什么帮助？
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑（一）：前端代码单元测试怎么做？
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
加餐 | 一个前端工程师到底需要掌握哪些技能？
尾声 (1讲)
尾声 | 长风破浪会有时，直挂云帆济沧海
重学前端
登录|注册
浏览器事件：为什么会有捕获过程和冒泡过程？
winter 2019-04-16
你好，我是 winter。这一节课，我们进入了浏览器的部分，一起来学习一下事件。
事件概述
在开始接触具体的 API 之前，我们要先了解一下事件。一般来说，事件来自输入设备，我们平时的个人设备上，输入设备有三种：
键盘；
鼠标；
触摸屏。
这其中，触摸屏和鼠标又有一定的共性，它们被称作 pointer 设备，所谓 pointer 设备，是指它的输入最终会被抽象成屏幕上面的一个点。但是触摸屏和鼠标又有一定区别，它们的精度、反应时间和支持的点的数量都不一样。
我们现代的 UI 系统，都源自 WIMP 系统。WIMP 即 Window Icon Menu Pointer 四个要素，它最初由施乐公司研发，后来被微软和苹果两家公司应用在了自己的操作系统上（关于这个还有一段有趣的故事，我附在文末了）。
WIMP 是如此成功，以至于今天很多的前端工程师会有一个观点，认为我们能够“点击一个按钮”，实际上并非如此，我们只能够点击鼠标上的按钮或者触摸屏，是操作系统和浏览器把这个信息对应到了一个逻辑上的按钮，再使得它的视图对点击事件有反应。这就引出了我们第一个要讲解的机制：捕获与冒泡。
捕获与冒泡
很多文章会讲到捕获过程是从外向内，冒泡过程是从内向外，但是这里我希望讲清楚，为什么会有捕获过程和冒泡过程。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
请订阅文章所属专栏。
立即订阅
登录 后留言
精选留言(14)
阿成事件的种类对应了浏览器的能力，我们并不需要记住所有的事件及其细节，我们只需要在用到某种能力的时候去查找相应的事件类型下的某一事件即可。
补充一下楼下仁兄的答案：移动端设备上的touch系列，以及新标准(好像也挺多年了，不过兼容性让人望而却步...)的pointer系列2019-04-16 6
injser评论越来越少...果然贵在坚持2019-05-30 1 4
bestRktnZnnn请问自定义事件主要应用场景是什么呢2019-05-23 4
Evenhttps://developer.mozilla.org/zh-CN/docs/Web/Events 直接看MDN2019-04-26 2
🔅fighting🔅01：UI事件，load，unload判断页面是都加载完成；
02：焦点事件，focus，blur
03：鼠标事件，click，dbclick，mousedown，mouseup，scroll
04：键盘事件 keydown，keyup，keypress，textInput，2019-08-16 1
令狐洋葱老师对于这类历史还是有一些了解的哈，不知道这类知识哪里获取的，是想了解就去搜索的么？作者回复: 前面有讲学习方法
2019-08-15 1
junjun感觉讲的最好和实际应用联系起来，不然完全看不出有什么意义，毕竟最后还是为了应用。2019-10-09
马成事件触发的顺序总是 先从外向内捕获，然后再从内向外冒泡2019-09-05- Geek_b43014解惑了，赞2019-06-12
张驰Terry讲得真好2019-06-04
桃翁我其实没有明白为什么写组件就要用到捕获事件呢？2019-05-23
dwqyun那子元素的事件委托给父元素时，添加事件监听的第三个参数直接设置为true，在捕获过程就判断父元素上的事件目标会比冒泡好些嘛？2019-04-24
花狗是我这钱花的值2019-04-18
レイン小雨有意思2019-04-16
收起评论