JS中绑定事件顺序（事件冒泡与事件捕获区别）
发布时间 - 2026-01-10 22:46:57 点击率：次在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段（重要），这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。直接看下面实例
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
</style>
</head>
<body>
<div id="id1" style="height:400px; border:1px solid #000;">
<div id="id2" style="height:200px; border:1px solid #000;">
<div id="id3" style="height:50px; border:1px solid #000;"></div>
</div>
</div>
</body>
<script type="text/javascript">
var obj1=document.getElementById('id1');
obj1.addEventListener('click',function(){
alert('id1');
},false);
var obj2=document.getElementById('id2');
obj2.addEventListener('click',function(){
alert('id2');
},true);
var obj3=document.getElementById('id3');
obj3.addEventListener('click',function(){
alert('id3');
},true);
/*如果第三个参数为true，则事件在捕获阶段执行，如果第三个参数为false，则事件在冒泡阶段执行*/
</script>
</html>
当点击id3元素时候，执行结果是：id2，id3，id1
解析：因为obj2与obj3绑定的方法在捕获阶段执行，obj1的事件在冒泡阶段执行。
总结
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段，必须要理解
不过我们可以通过绑定事件时，指定事件执行时间是在冒泡阶段还是捕获阶段。
obj.addEventListener(event,function(){},bool)
bool:false，代表冒泡阶段执行
bool:true，代表捕获阶段执行
JS在默认情况下获取事件后，就开始从根元素开始捕获所有该事件的监听对象，然后在冒泡阶段逐一执行。捕获阶段是在冒泡阶段前面
阻止冒泡
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true；
阻止默认行为
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
关于JS 事件冒泡和onclick,click,on()事件触发顺序
onclick,click,on()的优先关系：onclick>click>on()；
onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；
on()绑定的事件，总是晚于onclick和click绑定的事件触发；
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
# js
# 事件捕获
# 冒泡
# 事件冒泡
# JavaScript事件冒泡与事件捕获实例分析
# javascript 中事件冒泡和事件捕获机制的详解
# 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
# js事件冒泡与事件捕获详解
# 浅谈javascript中的事件冒泡和事件捕获
# JS中事件冒泡和事件捕获介绍
# javascript事件冒泡和事件捕获详解
# js之事件冒泡和事件捕获详细介绍
# 浅析js中事件冒泡与事件捕获
# 绑定
# 是在
# 执行时间
# 子类
# 则是
# 第三个
# 而非
# 我们可以
# 定了
# 会先
# 内到
# 情况下
# 这也是
# 就开始
# 晚于
# 结果是
# 必须要
# padding
# style
# type
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Linux网络带宽限制_tc配置实践解析【教程】
Laravel与Inertia.js怎么结合_使用Laravel和Inertia构建现代单页应用
Laravel如何使用Passport实现OAuth2？（完整配置步骤）
Laravel如何优化应用性能？（缓存和优化命令）
手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？
如何快速登录WAP自助建站平台？
如何在腾讯云服务器上快速搭建个人网站？
如何快速生成凡客建站的专业级图册？
Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】
Laravel怎么实现微信登录_Laravel Socialite第三方登录集成
Win11关机界面怎么改_Win11自定义关机画面设置【工具】
百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧
如何彻底删除建站之星生成的Banner？
在centOS 7安装mysql 5.7的详细教程
javascript如何操作浏览器历史记录_怎样实现无刷新导航
简单实现Android验证码
百度输入法ai组件怎么删除 百度输入法ai组件移除工具
jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】
如何在自有机房高效搭建专业网站？
Laravel如何实现API资源集合？（Resource Collection教程）
东莞专业网站制作公司有哪些,东莞招聘网站哪个好？
Laravel如何升级到最新版本？（升级指南和步骤）
Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID
高端建站三要素：定制模板、企业官网与响应式设计优化
如何解决hover在ie6中的兼容性问题
网站制作壁纸教程视频,电脑壁纸网站？
如何快速生成ASP一键建站模板并优化安全性？
Laravel怎么生成URL_Laravel路由命名与URL生成函数详解
Laravel如何生成URL和重定向？（路由助手函数）
b2c电商网站制作流程,b2c水平综合的电商平台？
Swift中循环语句中的转移语句 break 和 continue
在Oracle关闭情况下如何修改spfile的参数
Android Socket接口实现即时通讯实例代码
Laravel如何记录自定义日志？（Log频道配置）
Linux后台任务运行方法_nohup与&使用技巧【技巧】
如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环
如何在阿里云香港服务器快速搭建网站？
如何在万网自助建站中设置域名及备案？
Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践
Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践
做企业网站制作流程,企业网站制作基本流程有哪些？
python中快速进行多个字符替换的方法小结
php中::能调用final静态方法吗_final修饰静态方法调用规则【解答】
高端网站建设与定制开发一站式解决方案 中企动力
如何用PHP工具快速搭建高效网站？
HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】
Laravel集合Collection怎么用_Laravel集合常用函数详解
如何用花生壳三步快速搭建专属网站？
Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程
javascript中的try catch异常捕获机制用法分析