JS中事件冒泡，事件捕获详解
一、事件流
事件是js与HTML交互的基础，事件流形容的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
假如单纯的事件解决，事件捕获和事件冒泡二选一就可，导致两者并存的起因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。
1、事件冒泡
事件开始由最深层的元素接收，而后逐级向上传播
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 100px; height: 100px; background-color: red; } </style></head><body><div id="div"></div><script> let div = document.getElementById('div'); div.onclick = function () { console.log('div'); }; document.body.onclick = function () { console.log('body') };</script></body></html>当点击div标签的时候，先打印出div，而后再打印出body。由于div先接收到点击事件，而后再向它的父元素body传播，再到html，最后到document。
IE，chrome，Firefox，Opera，Safari五大浏览器都支持事件冒泡。
2、事件捕获
事件开始由最外层的document捕获，而后依次向内传播，直至最深层的元素
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 100px; height: 100px; background-color: red; } </style></head><body><div id="div"></div><script> let div = document.getElementById('div'); div.addEventListener('click', function () { console.log('div'); }, true); document.body.addEventListener('click', function () { console.log('body') }, true);</script></body></html>当点击div标签的时候，最先打印body，而后再打印出div。由于addEventListener函数的第三个参数为true时，函数解决捕获事件，document先捕获点击事件，依次传播到html—body—div。
IE9，chrome，Firefox，Opera，Safari五大浏览器都支持事件捕获，IE8及以下版本不支持事件捕获。
最后
为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前台全栈学习交流圈：866109386.欢迎大家进群交流探讨，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终白费大量时间，所以有有效资源还是很有必要的。
最后祝福所有遇到瓶疾且不知道怎样办的前台程序员们，祝福大家在往后的工作与面试中一切顺利。
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS中事件冒泡，事件捕获详解
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS中事件冒泡，事件捕获详解
