位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 捕获事件流

提问人:刘团圆发布时间:2020-11-27

■知识点

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

    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>

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部