JavaScript 捕獲事件流

■知識點

鼠標(biāo)指針經(jīng)過事件包括如下兩個。

    mouseover：當(dāng)鼠標(biāo)指針移動某個元素上時觸發(fā)。

    mouseout：當(dāng)鼠標(biāo)指針移出某個元素時將觸發(fā)。

■實例設(shè)計

    本例設(shè)計文檔中包含5層嵌套的div元素，為它們定義相同的click事件，同時為每層<div>標(biāo)簽定義不同的類名。當(dāng)單擊<div>標(biāo)簽時，設(shè)計當(dāng)前對象邊框顯示為紅色虛線效果，同時抓取當(dāng)前標(biāo)簽的類 名，以此標(biāo)識每個標(biāo)簽的響應(yīng)順序。

<script〉

function bubble(){

    var div = document.getElementsByTagNarae('div');

    var show = document.getElementById("show");

    for (var i = 0; i < div. length; ++i) {                          //遍歷 div 元素

        div[i] .onclick = (function (i) {                               //為每個div元素注冊鼠標(biāo)單擊事件處理函數(shù)

        return function () {                                                //返回閉包函數(shù)

            div[i].style.border = 'lpx dashed red';                //定義當(dāng)前元素的邊框線為紅色虛線 

            show.innerHTML += div[i] .className +">";    //標(biāo)識每個 div 元素的響應(yīng)順序

        }

        }) (i)；

    }

}

window.onload = bubble;

</script>

<div class="div-l">div-l

    <div class="div-2">div-2

        <div class="div-3">div-3

            <div class="div-4">div-4

                <div class="div-5">div-5</div>

            </div>

        </div>

    </div>

</div>

<p id="show"></p>