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>
            /*
            事件流
                事件流的三個(gè)階段：捕獲，目標(biāo)，冒泡
                阻止冒泡

                事件委托機(jī)制：利用時(shí)間冒泡的原理，把本應(yīng)添加給某元素上的事件委托給他的父級(jí)（外層）
            */
        </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>
            //點(diǎn)擊里面的inner 會(huì)一起顯示外面的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>
            //點(diǎn)擊字條會(huì)打印里面的數(shù)字
            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")         //點(diǎn)擊空白處也會(huì)打印aa
                var evt = e || event
                var oTarget = evt.target || evt.srcElement      
                /*
                    我們可以調(diào)用他的各種屬性就像:document.getElementById("")這樣的功能，
                    event.srcElement 可以捕獲當(dāng)前事件作用的對(duì)象，
                    如event.srcElement.tagName可以捕獲活動(dòng)標(biāo)記名稱。
                */
                if(oTarget.nodeName.toUpperCase() == "LI"){     //添加判斷條件
                    console.log(oTarget.innerHTML)          //firefox 下的 event.target = IE 下的 event.srcElement 這是一種規(guī)范，ie下支持e.srcElement，ff支持e.target
                }
            }
            //后面添加的字條點(diǎn)擊后 不會(huì)打印
            for(var i = 0; i < 5; i++){
                var oLi = document.createElement("li")
                oLi.innerHTML = i;
                oUl.appendChild(oLi)
            }
        </script>
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容