js的事件流你真的弄明白了吗？
当浏览器发展到第四代时候，浏览器开发团队遇到了一个有意思的问题；页面的哪一部分会拥有某个特地的事件？要明白这个问题问的是什么，可以想象画在纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是纸上所有的圆。两家公司的开发团队在这件事情上的看法是一致的，如果你单击了某个按钮，他们都认为单击事件不仅发生在按钮上，更是发生在了整个容器元素，甚至是整个页面。
那么对于页面接收事件的顺序两者出现了不同的定义：捕获流 （ chrome ）冒泡流（ IE )。在事件监听addEventListener的第三个参数中，捕获流是 true,冒泡流是 false。主流浏览器默认的都是冒泡流机制，也就是第三个参数默认false。
事件捕获：window -> document -> html -> body -> button (原先的‘DOM2级事件’本来是规定事件应该从document对象出发的，但是后面几乎所有的浏览器还是拓展到了window对象层面)
事件冒泡：button -> body -> html -> document -> window
事实上‘DOM2级事件’规定的事件流包括了三个阶段： 事件捕获阶段，处于目标阶段，事件冒泡阶段。（原先是规定捕获阶段不涉及事件目标的，但是后面高版本都会在捕获阶段触发事件对象上的事件）
重点：处于目标阶段，即button的事件在捕获阶段和冒泡阶段都会被触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box
{
position: relative;
background-color: coral;
border: 1px solid;
padding: 50px;
}
.child {
position: relative;
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="A" class="box">
<div id="B">
<div id="C" class="child">点击该方块， 我是冒泡</div>
</div>
</div><br>
<script>
document.getElementById("A").addEventListener("click", function(e)
{
console.log("1 捕获");
}, true);
document.getElementById("B").addEventListener("click", function(e)
{
console.log("2 捕获");
// e.stopPropagation()
}, true);
document.getElementById("C").addEventListener("click", function(e)
{
console.log("捕获阶段触发目标");
// e.stopPropagation()
}, true);
document.getElementById("C").addEventListener("click", function()
{
console.log("冒泡触发目标");
}, false);
document.getElementById("B").addEventListener("click", function()
{
console.log("1 冒泡");
}, false);
document.getElementById("A").addEventListener("click", function()
{
console.log("2 冒泡");
}, false); </script> </body>
</html>
执行结果如下：
值得注意的是，捕获阶段或者冒泡阶段对应的在 C 上的事件其实并不是 先捕获阶段触发目标 然后是冒泡阶段触发目标，在C上的事件其实是都是触发的，触发顺序取决于你写的顺序。不信，换下顺序如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box
{
position: relative;
background-color: coral;
border: 1px solid;
padding: 50px;
}
.child {
position: relative;
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="A" class="box">
<div id="B">
<div id="C" class="child">点击该方块， 我是冒泡</div>
</div>
</div><br>
<script>
document.getElementById("A").addEventListener("click", function(e)
{
console.log("1 捕获");
}, true);
document.getElementById("B").addEventListener("click", function(e)
{
console.log("2 捕获");
// e.stopPropagation()
}, true);
document.getElementById("C").addEventListener("click", function()
{
console.log("冒泡触发目标");
}, false);
document.getElementById("C").addEventListener("click", function(e)
{
console.log("捕获阶段触发目标");
// e.stopPropagation()
}, true); document.getElementById("B").addEventListener("click", function()
{
console.log("1 冒泡");
}, false);
document.getElementById("A").addEventListener("click", function()
{
console.log("2 冒泡");
}, false); </script> </body>
</html>
执行结果如下：
接下来继续说一下阻止冒泡，假设我在 console.log("1 捕获") 或者 console.log("2 捕获") 后面加上 e.stopPropagation(),后面的事件还能触发吗？单单是只把冒泡流扼杀了吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box
{
position: relative;
background-color: coral;
border: 1px solid;
padding: 50px;
}
.child {
position: relative;
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="A" class="box">
<div id="B">
<div id="C" class="child">点击该方块， 我是冒泡</div>
</div>
</div><br>
<script>
document.getElementById("A").addEventListener("click", function(e)
{
console.log("1 捕获");
e.stopPropagation()
}, true);
document.getElementById("B").addEventListener("click", function(e)
{
console.log("2 捕获"); }, true);
document.getElementById("C").addEventListener("click", function()
{
console.log("冒泡触发目标");
}, false);
document.getElementById("C").addEventListener("click", function(e)
{
console.log("捕获阶段触发目标");
// e.stopPropagation()
}, true); document.getElementById("B").addEventListener("click", function()
{
console.log("1 冒泡");
}, false);
document.getElementById("A").addEventListener("click", function()
{
console.log("2 冒泡");
}, false); </script> </body>
</html>
事实上，它是把后面的事件流都打断了。而如果 e.stopPropagation() 是写在 console.log("捕获阶段触发目标") 或者 console.log("冒泡触发目标")后面，目标阶段都点击事件都会执行，执行按你写的顺序来。
Propagation英文意思是‘传播’ stopPropagation 就是阻止事件传播，阻止事件流的继续往下发生。
所以stopPropagation()方法事实上是打断了事件流继续执行，而我们一般时候是直接写在目标事件的点击函数里，就起到了阻止冒泡的作用！
js的事件流你真的弄明白了吗？的更多相关文章
- js的事件流理解
面试问到js的事件流,当时说的不是很清楚,现在觉得有必要把这个弄清楚. 事件捕获和事件冒泡 事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流主要分为两种,即事件捕获和事 ...
- js基础--javaScript数据类型你都弄明白了吗？绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- JS Event事件流（冒泡机制、捕获机制、事件绑定）
1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...
- 前端 ----js的事件流的概念（重要）
09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页 ...
- JS的事件流的概念(重点)
09-JS的事件流的概念(重点) 在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件 ...
- JS的事件流的概念
事件的概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在 ...
- JS的事件流概念*******
事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 事件流 事件流描述的 ...
- 08 JS的事件流的概念(重点)
在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...
随机推荐
- node.js服务器端下载、上传文件
使用request 下载文件: 安装依赖: npm i requestsourceUrl下载源,targetUrl保存路径 async function downLoadFile(sourceUrl, ...
- XML再深入
XML 命名空间 XML 命名空间提供避免元素命名冲突的方法. 使用前缀来避免命名冲突 在 XML 中的命名冲突可以通过使用名称前缀从而容易地避免. 该 XML 携带某个 HTML 表格和某件家具的信 ...
- SVN服务器在Ubuntu16.04下搭建多版本库详细教程
1 介绍 Subversion是一个自由,开源的版本控制系统,这个版本库就像一个普通的文件服务器,不同的是,它可以记录每一次文件和目录的修改情况.这样就可 以很方面恢复到以前的版本,并可以查看数据 ...
- SQLAlchemy的使用---增删改查
#通过SQLAlchemy对数据库进行增删改查 # 想要操作数据库 先要打开数据库连接 from create_table import engine # 创建会话 - 打开数据库连接 from sq ...
- bootstrap模态框实现相对定位拖拽
1.正常的拖拽是用绝对定位absolute来实现的,可是bootstrap的模态框是用relative,为了统一更改方便,就照着相对定位来实现拖拽效果. $(".modal .modal-h ...
- Android存储扩展学习-----应用的清除数据和清除缓存
前几天和朋友聊到了APP清除数据这块,聊到了清除数据都会清掉哪些数据,我们每个人的手机在”设置–>应用管理”里面,选择任意一个App,都会看到两个按钮,一个是清除缓存,另一个是清除数据,那么当我 ...
- linux常用指令集-持续更新...
0.查看所有java进程GC情况:for i in `jps|egrep -v "Jps|Launcher" |cut -d" " -f1`;do pwdx $ ...
- Siebel 基础入门--权限控制
企业应用最基本的要求就是只授予用户在他工作职责范围内的权限,一般而言,这种权限都包含两种,一种是对于相应的功能的可见性(或者形象地说,菜单的可见 性,这个是应用层面界面的,这种权限在Siebel里称为 ...
- 一個新的面試題目，leetcode上面可以找到shortest palindrome
記錄一下新的面試題目,其實題目是舊的,只是我才見到.以前研究過,只不過以前的解法不容易理解,現在有了新的遞歸解法.記錄一下. public String shortestPalindrome(Stri ...
- mysql_01_游标的使用
一.表的创建 1.直接创建表 DROP TABLE IF EXISTS shops_info; /*EMP产品版本版本信息表*/ CREATE TABLE shops_info ( ID INT PR ...