73 详解4

00

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
            事件流
                事件流的三个阶段：捕获，目标，冒泡
                阻止冒泡

                事件委托机制：利用时间冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）
            */
        </script>

        <style>
            #outer{
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #inner{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner"></div>
        </div>

        <script>
            //点击里面的inner 会一起显示外面的outer
            var Outer = document.getElementById("outer")
            var Inner = document.getElementById("inner")
            Outer.onclick = function(){
                console.log("outer")
            Inner.onclick = function(e){
                var evt = e || event
                console.log("inner")
                evt.cancelBubble = true
                //evt.stopPropagation()
                /*
                阻止冒泡
                    evt.cancelBubble = true     适用于所有浏览器
                    evt.stopPropagation()       IE浏览器不适用
                */
            }
            }
        </script>
    </body>
</html>

01

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li{
                margin: 20px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>
            //点击字条会打印里面的数字
            var oUl = document.getElementsByTagName("ul")[0]
            var aLi = document.getElementsByTagName("li")
            for(var i = 0; i < aLi.length; i++){
                aLi[i].onclick = function(){
                    console.log(this.innerHTML)
                }
            }


            //事件委托
            oUl.onclick = function(e){
                //console.log("aa")         //点击空白处也会打印aa
                var evt = e || event
                var oTarget = evt.target || evt.srcElement      
                /*
                    我们可以调用他的各种属性就像:document.getElementById("")这样的功能，
                    event.srcElement 可以捕获当前事件作用的对象，
                    如event.srcElement.tagName可以捕获活动标记名称。
                */
                if(oTarget.nodeName.toUpperCase() == "LI"){     //添加判断条件
                    console.log(oTarget.innerHTML)          //firefox 下的 event.target = IE 下的 event.srcElement 这是一种规范，ie下支持e.srcElement，ff支持e.target
                }
            }
            //后面添加的字条点击后 不会打印
            for(var i = 0; i < 5; i++){
                var oLi = document.createElement("li")
                oLi.innerHTML = i;
                oUl.appendChild(oLi)
            }
        </script>
    </body>
</html>