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>
相关推荐
苏州第一深情6 分钟前
【uniapp】uniapp实现单点登录、打包H5部署到线上
javascript·vue.js·uni-app
拉不动的猪6 分钟前
jS篇Async await实现同步效果的原理
前端·javascript·面试
杨充11 分钟前
03.接口vs抽象类比较
前端·后端
攻城狮7号18 分钟前
GPT-5的诞生之痛:AI帝国的现实危机
人工智能·深度学习·openai·gpt-5·sam altman
chxii23 分钟前
2.4 组件通信
前端·javascript·vue.js
Entropy-Lee27 分钟前
JavaScript 执行上下文与作用域
开发语言·javascript·ecmascript
泡岩浆的child1 小时前
朋友:你平常都用什么软件取色?我:QQ截图啊。朋友:牛X!
前端
老周聊大模型1 小时前
AI工程化必学:Spring AI与Redis的黄金组合实践
javascript·人工智能·程序员
志如1 小时前
【校招面试官说】什么样的技术人更容易被大厂校招选中?
前端·后端·面试
Steve_Abelieve1 小时前
Transformer的并行计算与长序列处理瓶颈
人工智能·深度学习·transformer