js事件冒泡及其阻止方法

js事件冒泡

概念：事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。也就是说我点击子元素，如果父级元素也有监听点击事件，也会被触发到。

    
    
    
    


    

        
1
        
2
        
3
    

    

上述例子，当你点击了第一圆圈，就会输出
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属性。

上述代码是比较多余的写法，是分别监听了三个元素
这里我们也可以用一种事件委托的写法，把事件监听写在他们的父元素里

let parent = document.getElementsByClassName('par')[0];
function myFun(event){
     console.log(event.target.getAttribute('data-id'))
}
parent .addEventListener('click', myFun,false)