事件冒泡和捕获

事件冒泡：有同一父元素点击子元素由内向外触发

事件捕获：有同一父元素，点击子元素，由外向内触发

使用场景：ul下的li 给ul绑定事件对li进行触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡和捕获</title>


    <style type="text/css">
        #parent{
             300px;
            height: 200px;
            background: yellow;
            margin: 0 auto;
        }
        #child{
             100px;
            height: 100px;
            background:blue ;
            margin: 0 auto;
        }


    </style>
</head>
<body>
<div id="parent">
    　　<div  id="child"></div>
</div>



<script type="text/javascript">
     // 冒泡
    document.getElementById("parent").addEventListener("click",function(e){
        alert("parent事件被触发");
    })
    document.getElementById("child").addEventListener("click",function(e){
        alert("child事件被触发")
    })
    //捕获
     document.getElementById("parent").addEventListener("click",function(e){
         alert("parent事件被触发")
     },true)
     document.getElementById("child").addEventListener("click",function(e){
         alert("child事件被触发")
     },true)









</script>
</body>
</html>