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;
JS事件冒泡及阻止的更多相关文章
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- 什么是JS事件冒泡?
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
随机推荐
- Ionic3学习笔记(八)使iOS端、Android端 Navbar 透明化
本文为原创文章,转载请标明出处 若要使iOS端 Navbar 透明,只需要给 ion-navbar 添加 transparent 属性,但是Android端依旧会有一条border在,所以再给 ion ...
- derby常用语法
derby常用语法 以user表为例: 1.创建表 create table user (id int primary key,account varchar(5),name varchar(5),p ...
- 850. Dijkstra求最短路 II
给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出1号点到n号点的最短距离,如果无法从1号点走到n号点,则输出-1. 输入格式 第一行包含整数n和m. 接下来m行每行包 ...
- 添砖加瓦:MySQL分布式部署
1.集群环境 管理节点(MGM):这类节点的作用是管理MySQLCluster内的其他节点,如提供配置数据,并停止节点,运行备份等.由于这类节点负责管理其他节点的配置,应该在启动其他节点之前启动这类 ...
- Gif截屏工具 - GifCam
如果你需要录制截屏并保存成gif图片格式,那么你一定不能错过GifCam这个神奇的小工具.它虽然只有600K,但功能不可小觑. GifCam (Gif相机) 是一款免费且非常优秀的视频录制/剪辑的GI ...
- Python爬虫-百度模拟登录(一)
千呼万唤屎出来呀,百度模拟登录终于要呈现在大家眼前了,最近比较忙,晚上又得早点休息,这篇文章写了好几天才完成.这个成功以后,我打算试试百度网盘的其他接口实现.看看能不能把服务器文件上传到网盘,好歹也有 ...
- IDEA 运行junit单元测试方法
配置Run,增加Junit 最终配置如下:
- 如何优化自己的JS代码
尽管接触大大小小项目N多个,但是刚入行两年, 撸码还是没有完全成一定的规律:最近受到很多启发,打算沉淀沉淀自己的代码: 之前很多页面的很多js脚本本分代码,更注重效果,事件久后没有发展 性能也是很关键 ...
- [Python之路] object类中的特殊方法
一.object类的源码 python版本:3.8 class object: """ The most base type """ # d ...
- py基础之模块与包
'''模块:当代码越来越多时,将所有代码放入一个文件中便会无法维护,所以放到多个文件中去,这样每一个py文件就是一个模块 包:模块越来越多时容易重名,便将模块放入不同的包中,每个包中必须有一个__in ...