JavaScript 捕獲事件流

■知識點

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

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

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

■實例設計

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

<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元素注冊鼠標單擊事件處理函數(shù)

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

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

            show.innerHTML += div[i] .className +">";    //標識每個 div 元素的響應順序

        }

        }) (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>