js事件冒泡
概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡</title>
<style type="text/css">
.par {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.child {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color:rgb(223, 240, 77);
display: inline-block;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="par">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
<script type="text/javascript">
let parent = document.getElementsByClassName('par')[0],
childOne = document.getElementsByClassName('child')[0]
parent.addEventListener('click', function(){console.log('I am parent')},false);
childOne.addEventListener('click', function(){console.log('I am childOne')},false)
</script>
</html>
上述例子，当你点击了第一圆圈，就会输出
I am childOne
I am parent
原因就是父元素的事件也被触发到了，这是就会很不方便，可能我们写在父元素的事件并不想被触发。
这里我们可以用到事件对象（在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。）
事件对象的stopPropagation() 方法，该方法可以取消事件的进一步冒泡。
childOne.addEventListener('click', function(event){event.stopPropagation(); console.log('I am childOne')},false)
当现在我们三个圆圈都要执行一个逻辑相同的函数，输出圆圈代表的数字时
event.target：表示触发一系列事件的源头
event.target.getAttribute(‘data-id’)：获取触发事件的源头的data-id属性。
<body>
<div class="par">
<div class="child" data-id="1"></div>
<div class="child" data-id="2"></div>
<div class="child" data-id="3"></div>
</div>
</body>
<script type="text/javascript">
let parent = document.getElementsByClassName('par')[0],
childOne = document.getElementsByClassName('child')[0]
childTwo = document.getElementsByClassName('child')[1]
childThree = document.getElementsByClassName('child')[2]
function myFun(event){
event.stopPropagation(); console.log(event.target.getAttribute('data-id'))
}
childOne.addEventListener('click', myFun,false)
childTwo.addEventListener('click', myFun,false)
childThree.addEventListener('click', myFun,false)
</script>
上述代码是比较多余的写法，是分别监听了三个元素
这里我们也可以用一种事件委托的写法，把事件监听写在他们的父元素里
let parent = document.getElementsByClassName('par')[0];
function myFun(event){
console.log(event.target.getAttribute('data-id'))
}
parent .addEventListener('click', myFun,false)
