JS中的冒泡简洁理解

xml 复制代码
事件冒泡
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中,泡泡会一直从水底冒出水面。也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JS事件冒泡</title>
</head>
<body>
    <div id="divOne" οnclick="ad()">
<div id="divTwo" οnclick="ac()">
<a id="hr_three" href="http://www.baidu.com"  οnclick="ab(event)">点击我</a>
</div>
</div>
</body>
<script>
function ad(){
    alert('我是最外层');
}
function ac(){
    alert('我是最中间层层');
      
}
function ab(){
    alert('我是最里层');
}
</script>  
</html>
Event对象
stopPropagation();方法:
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
该方法将停止事件的传播,阻止它被分派到其他Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>JS事件冒泡</title>
</head>
<body>
    <div id="divOne" οnclick="ad()">
<div id="divTwo" οnclick="ac()">
<a id="hr_three" href="http://www.baidu.com"  οnclick="ab(event)">点击我</a>
</div>
</div>
</body>
<script>
function ad(){
    alert('我是最外层');
}
function ac(){
    alert('我是最中间层层');
      
}
function ab(event){
    alert('我是最里层');
    event.stopPropagation();
}
</script>  
</html>
相关推荐
步步为营DotNet40 分钟前
深度解析CancellationToken:.NET中的优雅取消机制
java·前端·.net
gaolei_eit2 小时前
Vue3项目ES6转ES5,兼容低版本的硬件设备,React也
javascript·react.js·es6
一位搞嵌入式的 genius2 小时前
从 ES6 到 ESNext:JavaScript 现代语法全解析(含编译工具与实战)
前端·javascript·ecmascript·es6
linweidong4 小时前
C++ 模块化编程(Modules)在大规模系统中的实践难点?
linux·前端·c++
leobertlan7 小时前
2025年终总结
前端·后端·程序员
子兮曰8 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
百锦再8 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君8 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再8 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI9 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端