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以下版本的浏览器已基本退出 ...
随机推荐
- Linux入门(4)——Ubuntu16.04安装MATLAB2016b
通常有三个安装文件: Matlab 2016b Linux64 Crack.rar R2016b_glnxa64_dvd1.iso R2016b_glnxa64_dvd2.iso sudo apt i ...
- FPGA基础知识了解
FPGA学习的一些误区 FPGA入门必看资源 FPGA百度百科 FPGA基础知识及其工作原理 高端设计工具为少有甚是没有硬件设计技术的工程师和科学家提供现场可编程门阵列(FPGA).无论你使用图形化设 ...
- Spring 为Bean对象执行初始化和销毁方法
1)初始化: ①可以利用<bean>元素的init-method="方法名"属性指定初始化方法. ②指定的初始化方法是在构造方法调用后自动执行.若非单例模式,则每创建一 ...
- Git相关操作一
1.将目录变为Git项目: 输入git init将当期目录变为Git项目 git init git项目可以被认为分为三个区域,Working Directory,Staging Area,Reposi ...
- yii2之DetailView小部件
DetailView小部件用于展示单条数据记录,可配置属性很少,使用也很简单,直接贴代码,一看就懂! yii小部件数据小部件DetailView的使用示例: <?= DetailView::wi ...
- Hadoop完全分布式环境搭建
前言 本文搭建了一个由三节点(master.slave1.slave2)构成的Hadoop完全分布式集群(区别单节点伪分布式集群),并通过Hadoop分布式计算的一个示例测试集群的正确性. 本文集群三 ...
- Akka（34）： Http：Unmarshalling，from Json
Unmarshalling是Akka-http内把网上可传输格式的数据转变成程序高级结构话数据的过程,比如把Json数据转换成某个自定义类型的实例.按具体流程来说就是先把Json转换成可传输格式数据如 ...
- javascript高性能写法
看到一篇不错的博文,如果想写出比较高性能的代码,可参看这个链接http://developer.51cto.com/art/200906/131335.htm
- Xilinx ISE 14.1中模拟True Dual Port RAM例子
<一>创建工程 创建工程在此略过. <二>基本代码 1.创建一个Verilog modual代码如下: module main( input clk, input rsta, ...
- 获取 修改 CSS 样式
内联(style里的)样式 element.style.color element.style.getPropertyValue("color") 非内联样式 window.g ...