事件冒泡是指事件从目标元素逐级向上传播至document的过程；可通过stopPropagation()阻止冒泡，preventDefault()阻止默认行为，二者作用不同且可共存。
JavaScript 事件冒泡是指当一个元素上的事件被触发时，该事件会从目标元素逐级向上传播到其父元素，直到 document 根节点的过程。这是事件流的默认行为之一（另一个是捕获阶段，但冒泡更常用、更直观）。
事件冒泡是怎么发生的
比如你点击一个按钮，而这个按钮在 div 里，div 又在 body 里。点击后，事件会先在按钮上触发，然后“冒泡”到 div，再冒泡到 body，最后到 document。每个中间容器如果绑定了同类型的事件监听器（如 click），都会依次执行。
这本身不是 bug，而是设计机制，方便用事件委托（比如给 ul 绑定 click，通过 event.target 判断点的是哪个 li）。
如何阻止事件冒泡
调用事件对象的 stopPropagation() 方法即可中断向上传播：
立即学习“Java免费学习笔记（深入）”；
只影响当前事件监听器之后的冒泡路径，不影响同一元素上其他监听器的执行 写在事件处理函数内部，例如：e.stopPropagation(); 注意：IE8 及更早版本用 e.cancelBubble = true; 兼容（现代开发一般不需考虑）
如何阻止默认行为
很多 HTML 元素有自带行为，比如点击 a 标签会跳转、提交表单会刷新页面、按空格键在 checkbox 上会切换选中状态。这些是“默认行为”，可通过 preventDefault() 阻止：
写法示例：e.preventDefault(); 它和冒泡无关，只管是否执行浏览器原本要做的事 对没有默认行为的元素（如 div）调用它无效果
stopPropagation 和 preventDefault 的区别
这两个方法常被混淆，但作用完全不同：
stopPropagation() → 管“传不传”：阻止事件继续往父级冒泡 preventDefault() → 管“做不做”：阻止浏览器执行该事件对应的默认动作 两者可同时使用，互不影响。例如：点击链接既不跳转，也不触发父 div 的 click 监听器
以上就是什么是javascript事件冒泡_如何阻止事件传播的默认行为的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544423.html
微信扫一扫 
支付宝扫一扫 
