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>
相关推荐
bjzhang7519 分钟前
使用 HTML + JavaScript 实现组织架构图
前端·javascript·html·组织架构图
nap-joker21 分钟前
FT-Mamba:一种高效的表回归的新深度学习模型
人工智能·深度学习·ftmamba
军军君0132 分钟前
Three.js基础功能学习十六:智能黑板实现实例三
前端·javascript·css·vue.js·3d·前端框架·threejs
海上彼尚38 分钟前
SVG矢量图形快速入门
前端·html5
m0_3722570238 分钟前
bert和LLM训练的时候输入输出的格式是什么有什么区别
人工智能·深度学习·bert
嗷o嗷o1 小时前
Android App Functions 深入理解
前端
qq_20815408851 小时前
瑞树6代流程分析
javascript·python
UXbot1 小时前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式
落魄江湖行1 小时前
硅基同事埋的坑,我用2小时才填平:Nuxt 4 路由踩坑:可选参数 [[id]] 与 [id] 的区别
前端
杨夏同学1 小时前
AI入门——如何计算神经网络的参数
人工智能·深度学习·神经网络