6、事件冒泡、捕获以及阻止a标签默认事件

给父元素和子元素绑定相同的事件，子元素执行事件的时候，父元素的事件也会被触发

1、怎么阻止事件冒泡

event.stopPropagation();
加上这行代码，就可以阻止事件冒泡了
使用addEventListener绑定事件，可以传入三个参数，
    第一个参数：事件名
  第二个参数：回调函数
  第三个参数：是否冒泡，false为不冒泡

<div id="parent">
        <div id="child">
        </div>
    </div>
    <script>
        var parent = document.getElementById("parent")
        var child = document.getElementById("child")
        parent.onclick = function(event){
            alert('parent')
            event.stopPropagation()
        }
        child.onclick = function(event){
            alert("child")
            event.stopPropagation();
        }
                /* parent.addEventListener('click',function(){
            console.log('parent');
        },false) */
    </script>

2、事件的捕获

通过addEventListener实现捕获
当addEventListener第三个参数为true时，它就开启了捕获
var parent = document.getElementById("parent")
var child = document.getElementById("child")
parent.addEventListener("click",function(){
  console.log("parent");
},true)
child.addEventListener("click",function(){
  console.log("child");
},true)

3、阻止a标签默认事件

阻止默认事件：
  1、return false 
  2、event.preventDefault()

<a href="https://www.baidu.com" id="a">a</a>
<script>
  var a = document.getElementById('a')
a.onclick = function(){
  //return false
  event.preventDefault()
}
</script>
当返回值为false的时候，a标签的跳转就不可以执行了

4、事件委托

事件委托：利用事件冒泡的原理，把原来应该给子元素绑定的事件绑定给父元素，让父元素负责监听，通过冒泡将事件冒泡到子元素上

    <ul id="ul">
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ul>
    <script>
        var ul = document.getElementById("ul")
        ul.onclick = function(event){
            console.log(event.target);//li--html,css,js
        }
    </script>