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>
相关推荐
烛阴22 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子25 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
网安INF42 分钟前
深度学习中批标准化与神经网络调优
人工智能·深度学习·神经网络·机器学习
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python