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>
点击加载更多评论>>