冒泡和捕获的区别是冒泡事件是先触发子元素事件，再触发父元素事件，这个是冒泡。捕获是先触发父元素事件，再触发子元素事件。简单的来说，冒泡的顺序是由内到外，捕获的顺序是由外到内
举例：
<!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. 虚拟机启动linux系统报错，此主机支持 Intel VT-x，但 Intel VT-x 处于禁用状态

    在使用虚拟机启动linux的时候报错,如下: 已将该虚拟机配置为使用 64 位客户机操作系统.但是,无法执行 64 位操作. 此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态. ...

  2. Shell中的空格和引号

    空格对于linux的shell是一种很典型的分隔符,所以给变量赋值的时候中间不能够有空格.而单引号和双引号,都是为了解决中间有空格的问题.比如string1=this is a string,这样执行 ...

  3. Jquery挂事件与移除事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 杭电--1162--Eddy's picture--并查集

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  5. Eclipse里面Outline中图标的含义

    先说颜色:  绿色:public  黄色:protected  蓝色:no modifier  红色:private 再说形状:  实心:method  空心:variable  实心中间有字母C:c ...

  6. Spring(4)

    Spring的Bean的配置形式 1.基于XML的形式(无需讲解) 2.基于注解的形式(需要引入AOP的jar包,此jar包实现了AOP的注解) 当在Spring配置文件中引入类扫描注解命名空间并且指 ...

  7. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  8. elasticsearch相关文章

    http://blog.csdn.net/laigood12345/article/category/1113868

  9. vi技巧合集

    VIM 技巧 match & replace match the whole word(eg: match printf but not snprintf/fprintf)You can us ...

  10. Comparison method violates its general contract 关于jdk自带算法问题

    昨晚上线,线上报了一个问题,用的jdk8,用的collections.sort方法, public static void main(String[] args) { List<Integer& ...