JS冒泡事件与事件捕获实例详解

本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下：
案例

<！DOCTYPE html><html><head><title>冒泡事件</title><script type="text/javascript">window.onload = function（）{window.onclick = function（）{alert（"Window"）; // 顶级};document.onclick = function（）{alert（"Document"）; // 次顶级};document.documentElement.onclick = function（）{alert（"Html"）; // 次次顶级};document.body.onclick = function（）{alert（"Body"）; // 次次次顶级};document.getElementById（"myDiv"）.onclick = function（）{alert（"Div"）; // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话};}</script></head><body><div id="myDiv">点我</div></body></html>

小结
1.点击myDiv。依次是Div-Body-Html-Document-Window
2.点击其他空白地方。依次是Html-Document-Window
3.连续点击两次，会按顺序执行两次
4.冒泡的前提是，父级也定义了相应的事件
再看一个更复杂的例子

<！DOCTYPE html><html><head><meta charset="utf-8"><title>事件捕捉</title><script type="text/javascript">window.onload = function（）{window.addEventListener（"click", function（）{alert（"Window - true"）;}, true）; // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行document.addEventListener（"click", function（）{alert（"Document - true"）;}, true）;document.documentElement.addEventListener（"click", function（）{alert（"Html - true"）;}, true）;document.body.addEventListener（"click", function（）{alert（"Body - true"）;}, true）;document.getElementById（"myDiv"）.addEventListener（"click", function（）{alert（"Div - true"）;}, true）;window.addEventListener（"click", function（）{alert（"Window - false"）;}, false）; // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行document.addEventListener（"click", function（）{alert（"Document - false"）;}, false）;document.documentElement.addEventListener（"click", function（）{alert（"Html - false"）;}, false）;document.body.addEventListener（"click", function（）{alert（"Body - false"）;}, false）;document.getElementById（"myDiv"）.addEventListener（"click", function（）{alert（"Div - false"）;}, false）;window.onclick = function（）{alert（"Window - click"）; // 顶级};document.onclick = function（）{alert（"Document - click"）; // 次顶级};document.documentElement.onclick = function（）{alert（"Html - click"）; // 次次顶级};document.body.onclick = function（）{alert（"Body - click"）; // 次次次顶级};document.getElementById（"myDiv"）.onclick = function（）{alert（"Div - click"）; // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话};}</script></head><body><div id="myDiv">点我</div></body></html>

小结
1.点击的执行结果是
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
Body - false
Body - click
Html - false
Html - click
Document - false
Document - click
Window - false
Window - click
2.顺序与js代码顺序无关
3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到
再次改造，阻止冒泡

<！DOCTYPE html><html><head><meta charset="utf-8"><title>事件捕捉</title><script type="text/javascript">window.onload = function（）{document.addEventListener（"click", function（）{alert（"Document - true"）;}, true）;window.addEventListener（"click", function（）{alert（"Window - true"）;}, true）; // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行document.documentElement.addEventListener（"click", function（）{alert（"Html - true"）;}, true）;document.body.addEventListener（"click", function（）{alert（"Body - true"）;}, true）;document.getElementById（"myDiv"）.addEventListener（"click", function（）{alert（"Div - true"）;}, true）;window.addEventListener（"click", function（）{alert（"Window - false"）;}, false）; // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行document.addEventListener（"click", function（）{alert（"Document - false"）;}, false）;document.documentElement.addEventListener（"click", function（）{alert（"Html - false"）;}, false）;document.body.addEventListener（"click", function（）{alert（"Body - false"）;}, false）;document.getElementById（"myDiv"）.addEventListener（"click", function（）{alert（"Div - false"）;}, false）;window.onclick = function（）{alert（"Window - click"）; // 顶级};document.onclick = function（）{alert（"Document - click"）; // 次顶级};document.documentElement.onclick = function（）{alert（"Html - click"）; // 次次顶级};document.body.onclick = function（）{alert（"Body - click"）; // 次次次顶级};document.getElementById（"myDiv"）.onclick = function（）{alert（"Div - click"）; // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话event.stopPropagation（）; // 阻止冒泡};}</script></head><body><div id="myDiv">点我</div></body></html>

小结
Window - true
Document - true
Html - true
Body - true
Div - true
Div - false
Div - click
终止了，没有后续的内容了
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。