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>
相关推荐
三十而立洋3 小时前
深入理解 Monorepo:子包安装依赖
前端·前端工程化
IT_陈寒3 小时前
Java Stream处理大集合,我的内存怎么就炸了
前端·人工智能·后端
Captaincc3 小时前
AI 用量桌面端-桌面宠物自定义指南
前端·人工智能
Zzj_tju3 小时前
CLIP 图文对齐:先核对正样本,再相信检索分数
人工智能·深度学习·语言模型·自然语言处理
千里码aicood4 小时前
基于深度学习的驾驶员分心驾驶行为识别研究
人工智能·深度学习
OpenTiny社区4 小时前
码力全开,智启前端新生态|OpenTiny 登陆华为全联接大会2026
前端·github
妙码生花4 小时前
利用AI从零学Go并完成实战项目,完工总结:目录结构
前端·后端·go
妙码生花4 小时前
利用AI从零学Go并完成实战项目,完工总结:商业级开源产品定位和核心特性介绍
前端·后端·go
Captaincc4 小时前
掘金AI用量统计v0.1.0大更新-支持桌面宠物自定义和订阅额度卡片
前端·后端
默_笙5 小时前
🚲 从写信到打电话:WebSocket 双工通信与跨域方案的"通信进化史"
前端·javascript