js事件冒泡与捕捉解析
js的事件的冒泡与捕捉，简单来说就像个V型，从最高层body开始捕捉事件，然后一层一层往下开始捕捉，底层捕捉到事件后进行处理，然后再一层层冒泡传给父级，父级再传到它的父级，如果没有阻止冒泡，事件会一直传回给body，整个下来如下图所示：
下面的例子可以证明事件的冒泡与捕捉的过程：
在此例中我们用到一个js函数：
addEventListener(event,listener,userCapture)
其中：event:就是监听的事件 listener:即要执行监听的函数 userCapture: false的时候是冒泡， true表示是捕获。
1.事件捕获
A：
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
console.log("body-capture");
},true);
parent.addEventListener("click",function(e){
console.log("parent-capture");
},true);
child.addEventListener("click",function(e){
console.log("child-capture");
},true);
</script>
</body>
</html>
上面代码输出的结果是：
body-capture
parent-capture
child-capture
说明事件的捕获是从上级往下捕获的。
2.事件冒泡
B：
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
parent.addEventListener("click",function(e){
console.log("click-parent");
},false);
child.addEventListener("click",function(e){
console.log("click-child");
},false);
</script>
</body>
</html>
输出结果：
click-child
click-parent
click-body
事件冒泡从下级往上级冒泡
将上面的代码整合起来：
C：
出<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#parent {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="parent">
parent
<button id="child">child</button>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click",function(e){
alert("click-body");
},false);
parent.addEventListener("click",function(e){
alert("click-parent");
},false);
child.addEventListener("click",function(e){
alert("click-child");
},false);
document.body.addEventListener("click",function(e){
alert("body-capture");
},true);
parent.addEventListener("click",function(e){
alert("parent-capture");
},true);
child.addEventListener("click",function(e){
alert("child-capture");
},true);
</script>
</body>
</html>
输结果：
body-capture
parent-capture
click-child
child-capture （为神么到child是先执行冒泡，再执行捕获，这点我还没搞懂）
click-parent
click-body
事件是先捕获后冒泡，如上面所说的V型
3.阻止冒泡/阻止捕获
阻止冒泡需要 stopPropogation()函数
上栗B处代码，如果要在child执行完之后，阻止像parent冒泡则只需要将：
child.addEventListener("click",function(e){
console.log("click-child");
},false);
改为：
child.addEventListener("click",function(e){
console.log("click-child");
e.stopPropagation();
},false);
此时输出的结果就是：
click-child
阻止捕获也是同样方法，用stopPropogation()函数
将上栗A中的代码：
document.body.addEventListener("click",function(e){
console.log("click-body");
},false);
改为：
document.body.addEventListener("click",function(e){
console.log("body-capture");
e.stopPropagation();
},true);
则输出的结果是：
body-capture
body的下级就不能捕捉事件，捕捉不到事件，自然也就不能冒泡了。
以上是我对事件的冒泡和捕捉的理解，没有考虑不同浏览器对其的支持，以及不同浏览器处理的差别问题。
如有错误，欢迎指出
如有问题，欢迎提问
转载于:https://www.cnblogs.com/ycherry/p/7238765.html
js事件冒泡与捕捉解析相关推荐
- JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
- js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
- JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
- 什么是js事件冒泡？
什么是js事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或事件返回true,那么这个事 ...
- JS——事件冒泡与阻止事件冒泡
文章目录 前言 一.DOM事件流 1.什么是事件流呢? 2.事件流的两种方式 2.1 事件冒泡 2.2 事件捕获 2.3 DOM事件的3个阶段 二.事件对象 1.什么是事件对象 2.事件对象的使用 3 ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
最新文章
- Java - 错误: quot;java.lang.ArrayIndexOutOfBoundsException: length=1; index=1quot;
- python学习之路day05——cmd操作命令
- xss challenge 解题思路（1-3）
- LeetCode 1056. 易混淆数（哈希）
- Kubernetes-存活探针(liveness probe)（十六）
- OpenGL ES的性能范围（OpenGL ES2.0官方文档）
- 2021年中国车内娱乐和信息系统市场趋势报告、技术动态创新及2027年市场预测
- 【Luogu】【关卡2-3】排序（2017年10月） 【AK】
- Java核心技术卷II：高级特性
- java电影购票系统_Java Swing实现电影购票系统项目
- 蓝牙电话之PBAP同步电话簿协议分析
- spacy词性标注解释【dep、pos、tag】
- ECMAscript6 初涉摘抄笔记
- windows无法完成系统配置。若要尝试恢复配置，请重新启动计算机。出现此情况怎么处理,Win7封装Windows无法完成系统配置解决方案...
- 葛道辉,李洪升,张亮,等. 轻量级神经网络架构综述
- 在线购物系统 问题描述、词汇表、领域类图
- oracle expdp jobname,【EXPDP/IMPDP】数据泵 job_name参数的使用
- R 加权最小二乘 代码_如何用EXCEL的规划求解功能优化投资组合的阿尔法值（最小二乘估计法）？...
- 《软件方法》第8章 分析 之 分析类图（2）
- 07_Numpy渐变图片的生成