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

事件冒泡

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

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

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

多次冒泡场景

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

a#bnt

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>

阻止事件冒泡

return false;

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个参数，

type:事件的类型

litener:事件通知的接口对象，或者函数

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>