事件冒泡(event bubbling)与事件捕捉(event capturing)
事件捕捉：
单击<div>元素就会以下列顺序触发click 事件。
Document => Element html => Element body => Element div
事件冒泡：
单击<div>元素就会以下列顺序触发click 事件。
Element div => Element body => Element html => Document
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#i1{
height: 500px;
width: 400px;
background-color: pink;
}
#i2{
height: 400px;
width: 300px;
background-color: red;
}
#i3{
height: 300px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="i1">
<div id="i2">
<div id="i3"></div>
</div>
</div>
<script type="text/javascript">
var myi1 = document.getElementById("i1");
var myi2 = document.getElementById("i2");
var myi3 = document.getElementById("i3");
myi1.addEventListener('click', function(){console.log('i1')}, false);
myi2.addEventListener('click', function(){console.log('i2')}, false);
myi3.addEventListener('click', function(){console.log('i3')}, false);
// 默认参数为 false, false 为冒泡, true 为捕捉
</script>
</body>
</html>
执行结果：
i3
i2
i1
执行顺序
以上面代码为例，更改addEventListener参数，得到不同的结果：
说明addEventListener从上级元素向下寻找，遇到true就先执行，遇到false就继续向下一级寻找，直到没有下一级
事件冒泡(event bubbling)与事件捕捉(event capturing)的更多相关文章
- JS 事件冒泡整理 浏览器的事件流
JavaScript与HTML的交互通过事件来实现.而浏览器的事件流是一个非常重要的概念.不去讨论那些古老的浏览器有事件捕获与事件冒泡的争议, 只需要知道在DOM2中规定的事件流包括了三个部分,事件捕 ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...
- JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...
- 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...
- JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- JS事件——禁止事件冒泡和禁止默认事件
Event 对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! 一.什么是事件冒泡 在一 ...
随机推荐
- centos7 eclispe 编译C++遇到的问题总结
最近由于工作的需要,又开始回归之前已经遗忘了的技术.arm嵌入式这个古老的名词. 开始选择了linuxminit,开始的linuxminit17以前还可以,可是用了一下linuxminit19,发现r ...
- python基础（内存分析，不引入第三方变量的方式交换变量的值）
a,b指向同一块内存地址 下面方法是重新给b赋值;a,b指向不同的内存地址 字符串或int类型内存分析 不引入第三方变量的方式,交换a,b的值
- Educational Codeforces Round 63 (Rated for Div. 2) D. Beautiful Array (简单DP)
题目:https://codeforces.com/contest/1155/problem/D 题意:给你n,x,一个n个数的序列,你可以选择一段区间,区间的数都乘以x,然后求出最大字段和 思路: ...
- 2018-2019-2 《网络对抗技术》Exp6 信息搜集与漏洞扫描 20165326
信息搜集与漏洞扫描 实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 基础知识 间接:不接触目标,无直接连接访问,使用辅助模块进行收集分析 DNS:执行各种相关查询 搜索引擎 直接:建立逻辑连 ...
- OpenGL中VA,VAO,VBO和EBO的区别
1,顶点数组(Vertex Array) VA,顶点数组也是收集好所有的顶点,一次性发送给GPU.不过数据不是存储于GPU中的,绘制速度上没有显示列表快,优点是可以修改数据. 4.VBO(Vertex ...
- 基于Java Instrument的Agent实现
使用 Instrumentation,使得开发者可以构建一个独立于应用程序的代理程序(Agent),用来监测和协助运行在 JVM 上的程序,甚至能够替换和修改某些类的定义.有了这样的功能,开发者就可以 ...
- fiddler模拟弱网测试点
弱网: oSession[“request-trickle-delay”] = “300”; 注释的也很明白,Delay sends by 300ms per KB uploaded.上传1KB需要3 ...
- Eureka的初识
在bili看完spring cloud eureka高可用注册中心的视频以后总结: 正常开发中,肯定有一个功能聚集服务中心,将功能方法全部写入其中,也就是一个springboot项目.该服务配置如下: ...
- ORACLE11G R2 RAC的进程启动流程
简要说明ORACLE11GR2 RAC的进程启动流程: 1.启动流程概览图: 二.RAC启动流程的梳理: 第一层:OHASD 启动:(OHASD派生) 1.CSSDAGENT负责启动CSSD的AGEN ...
- C语言权威指南和书单 - 专家级别
注: 点击标题即可下载 1. Advanced Programming in the UNIX Environment, 3rd Edition 2. Essential C 3. Computer ...