JavaScript 捕获事件流

■知识点

鼠标指针经过事件包括如下两个。

    mouseover：当鼠标指针移动某个元素上时触发。

    mouseout：当鼠标指针移出某个元素时将触发。

■实例设计

    本例设计文档中包含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元素注册鼠标单击事件处理函数

        return function () {                                                //返回闭包函数

            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>