举例
首先,你需要记住这点
事件流:描述的是从页面中接受事件的顺序
<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的点击事件
疑问:为什么会有捕获???
解答:因为这个是网景公司提出的捕获事件流。
总结:事件冒泡和事件捕获,只是事件处理顺序不同,不用想得太复杂