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以下版本的浏览器已基本退出 ...
随机推荐
- PyCharm 2017 免费 破解 注册 激活 教程（附 License Server 地址）（Python 编辑器 IDE 推荐）
许多朋友都在问如何破解 PyCharm 2017 Professional 专业版,咪博士对此是坚决反对的! 不到万不得已,请不要这样做.破解之前,请拖到文章末尾,思考几个问题,想明白你确实需要这样做 ...
- Python线程的常见的lock
IO阻塞分析: 下面该需求很简单将一个数值100做自减处到0.主函数中有0.1秒的IO阻塞 import threading import time def sub(): global num # 掌 ...
- windows平台安装并使用MongoDB
下载并安装MongoDB,我的安装路径:D:\Program_Files\MongoDB 创建数据库目录,我的目录:D:\mongodb\data\db 命令行下运行MongoDB服务器: 在命令行窗 ...
- Unix/Linux僵尸进程
1. 僵尸进程的产生: 一个进程调用exit命令结束自己生命的时候,其实它并没有真正的被销毁,而是留下一个称为“僵尸进程”的数据结构.这时它已经放弃了几乎所有内存空间,没有任何可执行代码,也不能被调度 ...
- switchhost -- 切换host的工具
https://github.com/oldj/SwitchHosts/downloads 下载链接: 1,290 downloads SwitchHosts! _v0.2.2.1790.dmg - ...
- RabbitMQ-Windows单机集群搭建
1.先安装Erlang http://www.erlang.org/downloads,安装完成后,设置环境变量: 变量名:ERLANG_HOME 变量值:D:\Program Files\erl9. ...
- HDU 4135 Co-prime（容斥+数论）
Co-prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- JavaWeb笔记一、Servlet 详解
一.创建一个 Servlet 简单实现类 1.创建一个 HelloServlet 类(测试 Servlet 接口方法) 1 //创建一个 HelloServlet 类并实现 Servlet 接口 2 ...
- 享受Python和PHP动态类型检查语言的快感
前言 写这文章的时候特地查了资料,以确保我没有说错关于Python和PHP的类型机制. 所以这里放一张图,关于强弱类型与动态/静态类型检查的区分 从分类上看,PHP属于弱类型语言,而Python属于强 ...
- Linux系列教程（十八）——Linux文件系统管理之文件系统常用命令
通过前面两篇博客,我们介绍了Linux系统的权限管理.Linux权限管理之ACL权限 介绍了通过设定 ACL 权限,我们为某个用户指定某个文件的特定权限,这在Linux只能对于一个文件只能有所有者权限 ...