事件冒泡 事件捕获 最简单，最实用的理解

举例

首先，你需要记住这点
事件流：描述的是从页面中接受事件的顺序

<div onclick="alert("div")">
<ul onclick="alert("ul");"> // someFunction 是一个事件句柄
	<li></li>
	<li></li>
	<li></li>
</ul>

以上代码，给 div绑定一个点击事件，ul绑定点击一个点击事件

事件冒泡（微软提出的事件流）

以上面的代码为例

当点击li标签时，“点击”这件事，会一直往上冒泡
“点击”这件事的执行顺序 li–>ul–>div–>body–>document–>window

因为已经给div, ul绑定了一个点击事件
所以“点击”这件事冒泡到ul,会执行ul的点击事件
-----------------这件事冒泡到div,会执行div的点击事件
-----------------这件事冒泡到body,会执行body的点击事件,如果body没有点击事件，也会冒泡到body
-----------------这件事冒泡到document,会执行document的点击事件,如果document没有点击事件，也会冒泡到document
-----------------这件事冒泡到window,会执行window的点击事件,如果window没有点击事件，也会冒泡到window

疑问：为什么会有冒泡？？？
解答：因为这个是微软公司提出的冒泡事件流，就像一个潜水员在水里，他呼吸的泡泡，会从底层，传递到水面。 我们的点击事件，会从我们点击的这个元素，一直冒泡到最外层

事件捕获（网景公司提出的事件流）

<div onclick="alert("div")">
<ul onclick="alert("ul");"> // someFunction 是一个事件句柄
	<li></li>
	<li></li>
	<li></li>
</ul>

以上面的代码为例

当点击li标签时，“点击”这件事，会从window对象开始触发
“点击”这件事的执行顺序 window–>document–>body–>div–>ul–>li

因为已经给div, ul绑定了一个点击事件

-----------------这件事冒泡到window,会执行window的点击事件,如果window没有点击事件，也会冒泡到window
-----------------这件事冒泡到document,会执行document的点击事件,如果documen没有点击事件，也会冒泡到document
-----------------这件事冒泡到body,会执行body的点击事件,如果body没有点击事件，也会冒泡到body
-----------------这件事冒泡到div,会执行div的点击事件
-----------------这件事冒泡到ul,会执行ul的点击事件

疑问：为什么会有捕获？？？
解答：因为这个是网景公司提出的捕获事件流。

总结：事件冒泡和事件捕获，只是事件处理顺序不同，不用想得太复杂