JavaScript(3)---事件冒泡、事件捕获
JavaScript(3)---事件冒泡与事件捕获
一、理解冒泡与捕获
假设有这么一段代码
<body>
<div><p>标签</p>
</div>
</body>
转换成图如下
我们知道Dom是有节点关系的
body -> div -> p 之间的关系就是 爷爷 -> 父亲 -> 儿子。
我们来思考一个关键的问题
如果此时我们在 body div p 都绑定一个点击事件(click)。此时如果我们只点击 p标签，它会不会触发div绑定事件 和 body绑定事件？
答案是会的
那这个时候就会有一个问题，既然点击 p标签 会触发 div绑定事件 和 body绑定事件，那执行顺序是怎么样的呢？
body事件 -> div事件 -> p事件？ 还是 p事件 -> div事件 -> body事件？
这两种不同的执行顺序就是对应上面的 事件冒泡 和 事件捕获。
事件捕获 事件从最上一级标签开始往下查找，直到捕获到事件目标(body事件 -> div事件 -> p事件)。
事件冒泡 事件从事件目标开始，往上冒泡直到页面的最上一级标签( p事件 -> div事件 -> body事件)
为了不混淆记忆它们，这里有个通俗的理解冒泡：
冒泡嘛，就像水里往上冒的泡泡，从一开始很小，然后慢慢变大直到破裂。所以是从小到大,也就是子标签到父标签传递的过程。那么事件捕获记住与冒泡相反就可以了。
二、事件冒泡 与 阻止冒泡
1、事件冒泡示例
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style>
#dv1{ /*为了直观 这里添加些样式*/
width: 300px;
height: 200px;
background-color: red;
}
#dv2{
width: 250px;
height: 150px;
background-color: green;
}
#dv3{
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">爷爷
<div id="dv2">父亲
<div id="dv3">儿子</div>
</div>
</div>
<script>
//事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
document.getElementById("dv1").onclick=function () {
console.log(this.id+" 爷爷");
};
document.getElementById("dv2").onclick=function () {
console.log(this.id+" 父亲");
};
//事件处理参数对象
document.getElementById("dv3").onclick=function (e) {
console.log(this.id+" 儿子");
//阻止事件冒泡
//e.stopPropagation();
};
</script>
</body>
</html>
运行结果
从这个示例我们可以看出3点
1、当点击儿子元素后,父亲和爷爷的点击事件也触发了。
2、onclick事件的顺序 儿子 - 父亲 - 爷爷。
3、当点击爷爷元素后，父亲和儿子的点击是不会触发的。
2、阻止事件冒泡
既然有冒泡事件,那肯定在实际开放过程中,你不需要冒泡，你只想儿子点击触发事件,父亲和爷爷不触发事件。
语法
1、window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
2、e.stopPropagation(); 谷歌和火狐支持
因为我用的是谷歌浏览器,所以这里用第二种方式阻止冒泡(只需把上面阻止事件冒泡的代码取消注释就可以了)
运行结果
从运行结果很明显看出,已经阻止了事件冒泡。
三、事件捕获
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#dv1 {
width: 300px;
height: 200px;
background-color: red;
}
#dv2 {
width: 250px;
height: 150px;
background-color: green;
}
#dv3 {
width: 200px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="dv1">爷爷
<div id="dv2">父亲
<div id="dv3">儿子</div>
</div>
</div>
<script>
//为每个元素绑定事件 这里
/**
* 捕获时间 从外到里
* 1、 addEventListener不是每个浏览器都兼容的
* 2、 这里true为事件捕获 false为事件冒泡
*/
document.getElementById("dv1").addEventListener("click", function (e) {
console.log(this.id+" 爷爷");
}, true);
document.getElementById("dv2").addEventListener("click", function (e) {
console.log(this.id+" 父亲");
}, true);
document.getElementById("dv3").addEventListener("click", function (e) {
console.log(this.id+" 儿子");
}, true);
</script>
</body>
</html>
运行
很明显，这里是从外到里执行事件。
你如果愿意有所作为，就必须有始有终。(22)
JavaScript(3)---事件冒泡、事件捕获的更多相关文章
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- 事件冒泡与捕获&事件托付
设想这样一种情况 一个div里面有个span元素 ,当鼠标单击span时,这个事件算是谁的? div还是span? 准确的说两个都触发了,这种认可大家都允许,事实就是这种, 第二个问题来了,这个事件 ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...
- JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)
1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函 ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
- JavaScript事件冒泡和捕获
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 事件冒泡是自下而上的去触发事件. 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:fa ...
随机推荐
- C#开发点滴记录
1.开发windows服务程序,不应该在程序中调用windform相关的方法与类库,会产生未知的异常,windows服务中是可以产生日志文件的,会生成在安装服务的当前路径下面,比如服务为D:/MySe ...
- ES-9200端口与9300端口
(1)Elasticsearch是基于lucene的全文检索服务器 (1)9300:ES节点之间的通讯使用 (2)9200:ES节点和外部通讯使用
- mybatis 无效字符
只想说 是真的坑啊!!!!!sql就是对 但就是报错无效字符..... 一.sql后有 “:”,我觉得这个应该坑了很多人了 二.标签后有类似于空格的东西(我也不知道是tab还是空格,反正删完就对了) ...
- 关于PGSQL连接问题
今天把运维管理服务移植在Linux下测试,但又不想在Linux中安装PGSQL的服务器,就想让运维管理服务在虚拟机中连接windows的PG服务,却发现PG服务器一直拒绝连接,检查了网络端口之后都没问 ...
- javascript入门教程01
1.javascript中变量的声明和赋值的三种方式 (1)先声明后赋值 var width; width=5; (2)同时声明和赋值变量 var width=5; var x,y,z=10; (3) ...
- PTA的Python练习题（九）
从 第3章-18 输出10个不重复的英文字母 继续 1. a=input() b='' c=a.replace(' ','') for i in c: if i not in b: b=b+i d=l ...
- VM安装linux操作系统详细教程
1.首先我们新建一个虚拟机,先不安装操作系统,稍后再对其安装Linux系统. 新建虚拟机步骤如下: 打开VMware软件,菜单栏点击“文件(F)”–>选择“新建虚拟机(N)”,如下图1,(或者直 ...
- 都客仿站高手已注册旗舰版V3.1
链接:https://pan.baidu.com/s/1R5ldFDjekuXmEp42-8SQSQ 提取码:gkm9
- 苹果系统 MacOS 安装根证书
12306 网上购票以及一些其他内部使用的系统,需要安装.cer扩展名的根证书的情况,windows安装较为简单大家也比较熟悉,使用mac安装根证书在此做下详细介绍. 当前以10.13.5版本为例,其 ...
- Encoding.UTF8 与 new UTF8Encoding(false) 有什么区别？
System.Text.Encoding.UTF8 是一个静态实例,它省略了 BOM,而 new UTF8Encoding(false) 创建的实例是含有 BOM 的. BOM,即 Byte Orde ...