冒泡和捕获的区别是冒泡事件是先触发子元素事件，再触发父元素事件，这个是冒泡。捕获是先触发父元素事件，再触发子元素事件。简单的来说，冒泡的顺序是由内到外，捕获的顺序是由外到内
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#son{
width: 200px;
height: 200px;
background-color: yellow;
}
#father{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
<script>
var father=document.getElementById("father");
var son=document.getElementById("son");

function outSide(){
console.log("我是父元素事件")
}
function inSide(){
console.log("我是子元素事件")
}

//测试冒泡 执行结果为先出现我是子元素，再出现我是父元素，证明元素执行的顺序是由内到外
// son.addEventListener("click",inSide,false);
// father.addEventListener("click",outSide,false);
// 测试捕获 执行结果是先出现我是父元素，再出现我是子元素，证明元素的执行顺序是由外到内
son.addEventListener("click",inSide,true);
father.addEventListener("click",outSide,true);

</script>

</html>

阻止事件冒泡：

function load(){
console.log('body')
}
function cli(e){
console.log('div');
if ( e && e.stopPropagation ){
e.stopPropagation(); 
}
else{
window.event.cancelBubble = true;
return false;
}
}

需要注意，在一些特殊事件中，本身就屏蔽了事件的冒泡

mouseout和mouseover 支持事件冒泡

mouseenter和mouseleave 则会自动阻止事件冒泡

target和currenttarget的区别 target指的是事件的真正触发者，currenttarget指的是事件的监听者，当不存在冒泡或者捕获的情况下，通常两者指向的对象为同一个，但是如果存在冒泡或者捕获，

就会指向各自所产生的对象

代码举例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#out{
width: 400px;
height:400px;
background-color:yellow;
}

#in{
width: 200px;
height:200px;
background-color:red;

}
</style>
</head>
<body>

<div id="out">
<div id="in"></div>
</div>

</body>
<script>
var out=document.getElementById("out");
var inner=document.getElementById("in");

out.addEventListener("click",function(e){
console.log("我在外面");
console.log(e.target);
console.log(e.currentTarget);
},false);
inner.addEventListener("click",function(e){
console.log("冒泡了");
console.log(e.target);
console.log(e.currentTarget);

},false);

此时点击out元素时，因为不触发冒泡事件，所以e.target和e.currentTarget的输出结果均为id=out的div，也就是大盒子触发了监听事件。

但是当点击in元素的时候，测触发冒泡，此时in元素的 e.target和e.currentTarget相同（因为原本点击的就是In元素）,但因为冒泡，其父元素out也会产生监听事件

而此时 out元素的 e.target 为 in 元素，因为确实点击的是 in元素(target指向真正的触发元素),而e.currentTarget输出则为out元素（产生监听的事件的元素）。

稍微自己总结了下，也不知道对不对：在通常情况下 e.target和e.currentTarget相同而在产生了冒泡或者捕获的元素中，非点击元素的 e.target和e.currentTarget不同.

事件冒泡和事件捕获以及解释target和currenttarget的区别的更多相关文章

  1. e.target与e.currentTarget的区别，事件冒泡与事件捕获 ，事件委托

    e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...

  2. javascript中的事件冒泡、事件捕获和事件执行顺序

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...

  3. JavaScript中的事件冒泡？事件传播的解释

    注:本文来源  可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...

  4. javascript --- 事件冒泡与事件捕获

    事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...

  5. JS事件（事件冒泡和事件捕获）

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  6. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  7. 彻底弄懂JS的事件冒泡和事件捕获

      先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false; ...

  8. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  9. 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理

    原文:https://segmentfault.com/a/1190000000749838 事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发 ...

随机推荐

  1. 无废话SharePoint入门教程五[创建SharePoint页面布局]

    一.前言 文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建页面布局 2.首次使用页面布局 3.修改页面布局 4.使用页面布局 5.最终效果 1.创建页面布局 (1)打开设计管理器, ...

  2. float和double的精度

    作者: jillzhang 联系方式:jillzhang@126.com 原网址:http://blog.csdn.net/wuna66320/article/details/1691734 1 范围 ...

  3. Excel学习技巧

    ctrl+R 初始化信息 ctrl+T 创建表列 ctrl+o 保存文件

  4. nano编辑器使用教程

    使用Linux VPS会经常和编辑器打交道,一般常用的是vi和nano,虽然vi功能强大,但是相对新手来要稍微难上手,GNU nano是一个体积小巧而功能强大的文本编辑器.这里就简单说一下nano的使 ...

  5. JavaScript与java的异同（一）

    讲个故事:话说很久很久以前,有一个叫网景(Netscape)的,十月怀胎,他生了个儿子,很开兴,给儿子取名livescript.Livescript很勤奋,帮大叔大婶干了好多活,也给他爸赚了很多钱.突 ...

  6. hammer.js实现背景图手势缩放调整位置

    <!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...

  7. 【转】Swift之 ? 和 !

    原文地址:http://joeyio.com/ios/2014/06/04/swift---/ Swift语言使用var定义变量,但和别的语言不同,Swift里不会自动给变量赋初始值,也就是说变量不会 ...

  8. MS SQLSERVER中如何快速获取表的记录总数

    在数据库应用的设计中,我们往往会需要获取某些表的记录总数,用于判断表的记录总数是否过大,是否需要备份数据等.我们通常的做法是:select count(*) as c from tableA .然而对 ...

  9. DataSet集合直接根据传入的类转List<T>集合

    最近比较忙,好久没写博客了.个人感觉最好的进步就是写东西.哈哈. 一般我们使用ADO.net从数据库中读取数据返回的集合是DataSet类型的.有时候我们需要进行转换成List<T>集合. ...

  10. AWS-CDH5.5安装-安装

    1.安装MySQL [root@ip---- mysql]# rpm -ivh MySQL-server--.el6.x86_64.rpm MySQL-client--.el6.x86_64.rpm ...