event事件对象的标准方法
在翻阅MDN研究怎么更改事件触发对象的时候，阅读了一下MDN中有关event事件对象的部分。发现这个对象有三个标准方法，分别是event.preventDefault、event.stopImmediatePropagation、event.stopPropagation。
event.preventDefault
preventDefault方法比较熟悉，因为经常需要用来阻止默认动作。它还有个IE版本（小于IE9）的兄弟event.returnValue = false;，然而低版本IE基本都用jQuery了，写法也是preventDefault() 无用豆知识+1日常1/1。然而这个方法并不能阻止事件冒泡……我很长一段时间都把这个方法当作阻止冒泡来使用了。
event.stopPropagation和event.stopImmediatePropagation
其实这俩才是真正的阻止事件冒泡，让后续节点无法捕获事件。区别是stopPropagation只会干掉当前类型事件的当前监听器事件冒泡，stopImmediatePropagation会干掉当前类型事件的全部同类监听器队列的冒泡。来个MDN的例子
<!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
const p = document.querySelector('p')
p.addEventListener("click", (event) => {
alert("我是p元素上被绑定的第一个监听函数");
}, false);
p.addEventListener("click", (event) => {
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
// 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
p.addEventListener("click",(event) => {
alert("我是p元素上被绑定的第三个监听函数");
// 该监听函数排在上个函数后面，该函数不会被执行
}, false);
document.querySelector("div").addEventListener("click", (event) => {
alert("我是div元素,我是p元素的上层元素");
// p元素的click事件没有向上冒泡，该函数不会被执行
}, false);
</script>
</body>
</html>
