冒泡和捕获的区别是冒泡事件是先触发子元素事件，再触发父元素事件，这个是冒泡。捕获是先触发父元素事件，再触发子元素事件。简单的来说，冒泡的顺序是由内到外，捕获的顺序是由外到内
举例：
<!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. fuelphp 问题1

    fuelphp遇到的一些小问题,写下来以防止别人遇到相同的问题,写的比较随意 1.引用到orm\model 报错:class Model_Test extends Orm\Model 报错内容:Cla ...

  2. javascript 中的借鸡生蛋

    如题所说,其实指的是 js 中的内置函数和 apply 的结合使用.这种用法很讨巧,读过 jQuery 源码的小伙伴都知道,它在里面被应用的非常广泛和精妙! 梨子:找出一个数组中的最大值和最小值 普遍 ...

  3. Android中的内容提供器

    用途 不同于File, SharedPreferences和DataBase,Content Provider主要用于不同的应用程序间共享数据,允许一个程序安全的访问另一个程序中的数据. 用法 通过C ...

  4. 【译】Android 6.0 Changes （机翻加轻微人工校对）

    Android 6.0 Changes In this document Runtime Permissions Doze and App Standby Apache HTTP Client Rem ...

  5. JSP内置对象---request对象（用户登录页面（返回值和数组：gerParameter，getParameterValues））

    创建两个jsp页面:reg.jsp 和 request.jsp reg.jsp: <%@ page language="java" import="java.uti ...

  6. 配置Java开发IDE

    http://www.cnblogs.com/feichexia/archive/2012/11/07/Vim_JavaIDE.html

  7. 学习asp.net比较完整的流程[转]

    如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET 我强烈反对在没系统学过一门面向对象(OO)语言的前提下去学ASP.NET. ASP.NE ...

  8. vim自动补全功能

    1.首先下载一个插件:ctags 输入:sudo apt-get install ctags 2.Ctrl+n进行单词的自动补全

  9. 如何让Button使用自定义icon

    1.在Buttton所在的html页面定义button要使用的icon的css样式,如 </style> <style> .dijitArrowIcon { backgroun ...

  10. require.js源码分析

    写的寥寥草草,博客园的布局怎么弄还没有研究,再保存一份草稿,日后在完善,深度研究 require.js 加载顺序 1:加载html主页,require.js文件 2:脚本执行到html中的script ...