js return与stopPropagation阻止事件冒泡区别以及addEventListener

事件冒泡

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

---

引用的百度百科,但好像跟我想要理解的事件冒泡还是有些不能理解。上面好像介绍了事件冒泡。每个事件都会产生冒泡，在javascript里，经常需要阻止事件冒泡。到底又是为什么 要阻止。

需要阻止事件冒泡一般是在什么情况呢,好好理了一下代码,

---

多次冒泡场景

在下面的html代码结构中，有两个元素需要绑定事件，我用jquery测试的,当然也可以直接js原生.click=function(){}

1. a#bnt
2. div#goods

点击goods box，a标签以外的区域会正常传递事件

当点击a的时候，会先传递a绑定的事件,但是a同属于div#goods区域，这时事件会继续向上传递，也就是2次冒泡出来，导致依次执行两个元素的所绑定的事件

当然在实际项目中很少会产生事件冒泡的尴尬

<div id="goods" style="width: 500px;height: 200px;background: #336699">    <a href="http://baidu.com" id="bnt" style="color: #fff">click prop</a></div><script src="jquery.js"></script><script>    var goods=$('#goods'),            a=$('#bnt');    a.on('click',function () {        alert('a标签的事件')    })    goods.on('click',function () {        alert('商品盒子的事件')    })</script>

---

阻止事件冒泡

1. return false;
2. event.stopPropagation();

event.stopPropagation
来自MDN-阻止当前事件在捕获及冒泡阶段的进一步传播。

每次点击都会产生一个event对象，里面有很多API，可以参阅mdn文档

阻止冒泡1

<div id="goods" style="width: 500px;height: 200px;background: #336699">    <a href="#" id="bnt" style="color: #fff">click prop</a></div><script src="jquery.js"></script><script>    var goods=$('#goods'),            a=$('#bnt');    a.on('click',function (event) {        event.stopPropagation();        alert('a标签的事件')    })    goods.on('click',function () {        alert('商品盒子的事件')    })</script>

阻止冒泡2

<script>    var goods=$('#goods'),            a=$('#bnt');    a.on('click',function (event) {        //event.stopPropagation();              alert('a标签的事件');        return false;    })    goods.on('click',function () {        alert('商品盒子的事件')    })</script>

区别

return 可以同时阻止冒泡，且阻止事件的默认行为>
[比如上面的a点击链接时跳转到百度,return false,便会阻止跳转]

event.stopPropagation();
阻止事件的进一步传播.(冒泡阶段和捕获阶段)

event.preventDefault();也可以阻止事件的默认行为,但不阻止冒泡

---

事件的冒泡是从dom树的底层，逐渐向上直到根root

---

EventTarget.addEventListener()事件的冒泡与捕获

target.addEventListener(type, listener[, options]);

里面有3个参数，

1. type:事件的类型
2. litener:事件通知的接口对象，或者函数
3. options: 默认为false,处理事件传递的方式，false冒泡 或者 true捕获

冒泡：从底层往上传递
捕获：从上面往元素的底层传递
事件的执行顺序相反

引用一下mdn的文档链接,该API其它相关的介绍去MDN上面看
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener,

---

如果用addEventListener改写上面的代码,改变一下事件传递的方式,点击a标签的时候，会先弹出
商品盒子的事件

<div id="goods" style="width: 500px;height: 200px;background: #336699">    <a href="#" id="bnt" style="color: #fff">click prop</a></div><script src="jquery.js"></script><script>    var goods=$('#goods'),            a=$('#bnt');    goods[0].addEventListener('click',function () {        alert('商品盒子的事件')    },true)    a[0].addEventListener('click',function () {        alert('a标签的事件')    },false)</script>