前端面试宝典 每日一题（17）能说说你对Javascript 事件冒泡、捕获的理解吗？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

这篇文章主要给大家整理了JS中比较主要的一个知识点、事件相关的知识，主要从1.冒泡、2.捕获，两个方面入手、整理，结合一些小的demo演示

首先叫讲一下事件冒泡，在说事件冒泡之前，先说一js 事件执行的流程，如图：

从图中我们能明显的看出来，js的事件响应过程是，从外到内，然后在从内到外，会先进事件捕获，然后再进行事件冒泡。

1.冒泡

首先关于冒泡的解释：当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序。

<form onclick="alert('form')">FORM
	<div onclick="alert('div')">DIV
		<p onclick="alert('p')">P</p>
	</div>
</form>		

点击内部的 p标签，onclick的运行顺序如下：

• 首先会在该 p 上的。
• 然后是外部 div 上的。
• 然后是外部 form 上的。

以此类推，直到最后的 document 对象。因为事件从内部元素“冒泡”到所有父级，就像在水里的气泡一样
冒泡事件从目标元素开始向上冒泡。通常，它会一直上升到 html，然后再到 document 对象，有些事件甚至会到达 window。
也可以通过event.stopPropagation() 阻止事件冒泡。

2.捕获

捕获，事件处理的另一个阶段被称为”捕获"，和事件冒泡的顺序相反，一般情况下，我们通过addEventListener监听到的默认是事件冒泡的结果，我们如果想要利用事件捕获来达到一些目标，那我我们可以通过给addEventListener添加参数的方式实现：

elem.addEventListener(..., {capture: true})
// 或者，用 {capture: true} 的别名 "true"
elem.addEventListener(..., true)		

通过以上两种方式，我们就可以将将默认冒泡事件，改成边成为捕获事件。