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>
相关推荐
愚公搬代码12 分钟前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全
Cache技术分享36 分钟前
503. Java 反射 - 编写 ServiceFactory 类
前端·后端
赵大仁44 分钟前
AI 限流 UX 设计:排队、降级、告知与用户预期管理
前端·ai·限流·用户体验·产品设计
weixin_440213291 小时前
BERT预训练原理详解:MLM掩码预测 + NSP句子预测
深度学习·自然语言处理·掩码·bert预训练
__sjfzllv___1 小时前
在职前端Leader学习/转行 AI Agent -DAY37
前端
用户2181697049301 小时前
Flutter (二十二) GlobalKey
前端
用户2181697049301 小时前
Flutter (二十一) 下拉刷新,加载更多
前端
呆萌很1 小时前
Sigmoid 与 Tanh 激活函数(S 型饱和激活函数)
人工智能·深度学习·机器学习
leoZ2311 小时前
10-Git 仓库蒸馏术:从代码仓库到 OpenClaw 虚拟人-蒸馏工具链
大数据·git·深度学习·神经网络·目标检测·elasticsearch·lstm
breeze jiang2 小时前
Next.js 16 App Router 实战:从 About、Blog 动态路由到全局 404
开发语言·javascript·ecmascript