js 事件冒泡和事件捕获
事件流：指的是网页中元素接受事件的顺序，它是一个概念，而不是具体的实际的东西
事件冒泡：指的是内层元素的事件，会触发包含着此元素的外层元素的事件，触发的顺序是：由内而外的
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
</style>
<script>
window.onload=function(){
var Obox1 = document.querySelector('.box1');
var Obox2 = document.querySelector('.box2');
var Obox3 = document.querySelector('.box3');
var Obtn = document.querySelector('.source'); Obox1.addEventListener('click',function(){
alert(1);
},false);
Obox2.addEventListener('click',function(){
alert(2);
},false);
Obox3.addEventListener('click',function(){
alert(3);
},false);
Obtn.addEventListener('click',function(){
alert('Hello,huanying2015!');
},false);
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<input class="source" type="button" value="触发源">
</div>
</div>
</div>
</body>
</html>
以下代码中：Obtn的点击事件，会触发外层box1,box2,box3的点击事件，触发顺序：Obtn---->box3---->box2---->box1
(也可以这样理解：Obtn实际是包含在box1,box2,box3中的，点击了Obtn，实际上box1,box2,box3都点击到了，所以box1,box2,box3会触发点击事件)
那么，怎么阻止冒泡事件呢？
阻止冒泡事件：可以使用stopPropagation()函数来阻止；
想在哪里阻止，就把函数加在哪里，例如，点击Obtn，而Obtn外层不会产生冒泡，可以在Obtn的点击函数里加入stopPropagation() 函数；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
</style>
<script>
window.onload=function(){
var Obox1 = document.querySelector('.box1');
var Obox2 = document.querySelector('.box2');
var Obox3 = document.querySelector('.box3');
var Obtn = document.querySelector('.source'); Obox1.addEventListener('click',function(){
alert(1);
},false);
Obox2.addEventListener('click',function(){
alert(2);
},false);
Obox3.addEventListener('click',function(){
alert(3);
},false);
Obtn.addEventListener('click',function(event){
alert('Hello,huanying2015!');
event.stopPropagation();
},false);
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<input class="source" type="button" value="触发源">
</div>
</div>
</div>
</body>
</html>
运行结果：
事件捕获：和事件冒泡类似，不过顺序相反，顺序是由外向内
事件捕获，只要把监听函数了的第三个参数，有false改为true，就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
</style>
<script>
window.onload=function(){
var Obox1 = document.querySelector('.box1');
var Obox2 = document.querySelector('.box2');
var Obox3 = document.querySelector('.box3');
var Obtn = document.querySelector('.source'); Obox1.addEventListener('click',function(){
alert(1);
},true);
Obox2.addEventListener('click',function(){
alert(2);
},true);
Obox3.addEventListener('click',function(){
alert(3);
},true);
Obtn.addEventListener('click',function(){
alert('Hello,huanying2015!');
},true);
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<input class="source" type="button" value="触发源">
</div>
</div>
</div>
</body>
</html>
运行结果：
那怎么阻止事件捕获呢，类似的，加入一个stopImmediatePropagation() 或者stopPropagation()函数 就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding:20px;
border:1px solid gray;
}
.box1{
position:relative;
width:200px;
margin:50px auto;
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
</style>
<script>
window.onload=function(){
var Obox1 = document.querySelector('.box1');
var Obox2 = document.querySelector('.box2');
var Obox3 = document.querySelector('.box3');
var Obtn = document.querySelector('.source'); Obox1.addEventListener('click',function(e){
alert(1);
e.stopPropagation();
},true);
Obox2.addEventListener('click',function(){
alert(2);
},true);
Obox3.addEventListener('click',function(){
alert(3);
},true);
Obtn.addEventListener('click',function(){
alert('Hello,huanying2015!');
},true);
}
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<input class="source" type="button" value="触发源">
</div>
</div>
</div>
</body>
</html>
运行结果：
这里要注意的是：stopPropagation() 函数必须放在外层容器中，捕获的顺序是从外到内执行的，放在最内层无效（因为程序已经执行过捕获过程了）
事件冒泡与事件捕获的顺序可以如下归纳：
js 事件冒泡和事件捕获的更多相关文章
- JS事件（事件冒泡和事件捕获）
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- JS事件冒泡与事件捕获怎么理解?
在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段: 事件捕获 --> 事件目标 --> ...
- 彻底弄懂JS的事件冒泡和事件捕获
先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ; 另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡: return false; ...
- js高级：event，事件冒泡，事件捕获
1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...
- JS高级：事件冒泡和事件捕获；
1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...
- 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- JS事件冒泡和事件捕获的详解
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...
随机推荐
- JAVA WEB 中涉及的编解码
1.对URL解码 1)URI部分解码:<Connector URIEncoding="UTF-8" /> 2)QueryString解码要么是 Header 中 Con ...
- 使用 paddle来进行文本生成
paddle 简单介绍 paddle 是百度在2016年9月份开源的深度学习框架. 就我最近体验的感受来说的它具有几大优点: 1. 本身内嵌了许多和实际业务非常贴近的模型比如个性化推荐,情感分析,词向 ...
- sql的基本知识
一.什么是sql? 全称:"结构化查询语言(Structured Query Language)",是1974年由Boyce和Chamberlin提出来的,现已经成为关系数据库的 ...
- PhiloGL学习（6）——深情奉献：快乐的一家
前言 话说上一篇文章结尾讲到这一篇要做一个地球自转以及月球公转的三维动画,提笔,不对,是提键盘开始写的时候脑海中突然出现了几年前春晚风靡的那首歌:蒙古族小丫头唱的快乐的一家.闲言莫提,进入正题. ...
- 如何在Windows上搭建Android开发环境
Android开发越来越火,许多小伙伴们纷纷学习Android开发,学习Android开发首要任务是搭建Android开发环境,由于大家 主要实在Windows 上开发Android,下面就详细给大家 ...
- iOS之 Auto Layout
1. 动画 // 修改从 StoryBoard 绑定到类的约束的值 self.boxView.constant += 80 // 在动画闭包里对其父级进行 layoutIfNeeded() UIVie ...
- SIP简介，第1部分：SIP初探
说明:以下内容来着之前下载的一份文档,现将概念部分摘录在BLog,完成文档将放在文件中. SIP简介,第1部分:SIP初探 时间:2006-04-07作者:Emmanuel Proulx浏览次数: 2 ...
- VS2008 C++ 利用WinHttp API获取Http请求/响应头部Header
http://www.cnblogs.com/LCCRNblog/p/3833472.html 这一篇博客中,实现了获取http请求/响应后的html源码,现在需要获取http请求/响应的头部Head ...
- HDU1175 连连看(DFS)
Problem Description “连连看”相信很多人都玩过.没玩过也没关系,下面我给大家介绍一下游戏规则:在一个棋盘中,放了很多的棋子.如果某两个相同的棋子,可以通过一条线连起来(这条线不能经 ...
- CUDA C Best Practices Guide 在线教程学习笔记 Part 2
10. 执行配置优化 ● 一个 SM中,占用率 = 活动线程束的数量 / 最大可能活动线程束的数量.后者保存在设备属性的 maxThreadsPerMultiProcessor 分量中(GTX10 ...