JS事件冒泡及阻止
时间:2022-07-24
本文章向大家介绍JS事件冒泡及阻止,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
事件冒泡及阻止
当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window
,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表现,但事件确实传递了。
事件冒泡的原因是事件源本身可能没有处理事件的能力,即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件,所以需要将事件传播出去,从而能达到处理该事件的执行函数。
实例
当点击id
为i3
的<div>
时,浏览器会依次弹出3 2 1
,这就是事件冒泡,此正方形处于叶节点上,对其操作的事件会向上进行冒泡,直到根节点。
<!DOCTYPE html>
<html>
<head>
<title>JS事件冒泡及阻止</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;">
<div id="i2" style="height: 100px;width: 100px;background: green;">
<div id="i3" style="height: 50px;width: 50px;background: blue;"></div>
</div>
</div>
</body>
<script type="text/javascript">
document.getElementById("i1").addEventListener('click',(e) => {
alert(1);
})
document.getElementById("i2").addEventListener('click',(e) => {
alert(2);
})
document.getElementById("i3").addEventListener('click',(e) => {
alert(3);
})
</script>
</html>
应用场景
例如我们有10
个<li>
标签,每个标签有一个uid
作为判断用户点击的区别,使用冒泡就不需要为每个<li>
绑定点击事件,可以称为事件委托
<!DOCTYPE html>
<html>
<head>
<title>JS事件冒泡及阻止</title>
</head>
<style type="text/css">
li{
cursor: pointer;
}
</style>
<body>
<ul id="u1">
<li uid="0">0</li>
<li uid="1">1</li>
<li uid="2">2</li>
<li uid="3">3</li>
<li uid="4">4</li>
<li uid="5">5</li>
<li uid="6">6</li>
<li uid="7">7</li>
<li uid="8">8</li>
<li uid="9">9</li>
</ul>
</body>
<script type="text/javascript">
document.getElementById("u1").addEventListener('click',(e) => {
alert(e.srcElement.getAttribute('uid'));
})
</script>
</html>
阻止冒泡
有时候我们并不希望事件冒泡而去执行上级节点绑定的事件,这时候就需要阻止事件的冒泡,w3c
的方法是e.stopPropagation()
,IE
则是使用 window.event.cancelBubble = true;
。
注意
- 不是所有的事件都能冒泡。以下事件不冒泡:
blur
、focus
、load
、unload
。 - 事件解决方案方式在不同浏览器,可能是有所区别的,有些不支持捕获型方案,多数浏览器默认冒泡型方案。
- 阻止冒泡并不能阻止对象默认行为,例如
submit
按钮被点击后会提交表单数据,需使用e.preventDefault();
阻止默认行为,IE
则是window.event.returnValue = false;
- struts2(一)之初识struts2
- AI聊天机器人备受青睐 专家呼吁少卖萌
- CQRS框架:AxonFramework 之 Hello World
- Kubernetes的服务网格(第4部分):通过流量切换持续部署
- TortoiseGit安装与配置
- mongodb 速成笔记
- oAuth 2.0 笔记
- JavaScript内置对象--Math对象
- oAuth 2.0 笔记
- common-pool2 学习:thrift连接池的另一种实现
- IntelliJ IDEA 17和Maven构建javaWeb项目
- spring-boot 速成(2) devtools之热部署及LiveReload
- spring-boot 速成(2) devtools之热部署及LiveReload
- 使用git提交项目
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 我讨厌这个绿油油的头像!我用opencv换一下背景
- 哈哈哈哈哈哈镜~
- 【对二寸照片的摧残】一:人脸马赛克
- 二寸照片识别/切边/矫正
- 给彦女王生成一副蒙太奇画像
- 设计模式~单例模式
- [Bazel]自定义工具链
- async和await的使用总结 ~ 竟然一直用错了c#中的async和await的使用。。
- 全网首发:12306抢票算法大曝光?(十张图搞定)
- 全网首发:12306抢票算法大曝光?(勘误)
- 新一代垃圾回收器ZGC的探索与实践
- Python GUI项目实战(一)登录窗体的设计与实现
- Python GUI项目实战(二)主窗体的界面设计与实现
- Python GUI项目实战(三)实现信息查询功能
- 在 Kubernetes 上使用 Argo 实现 CI/CD