您的位置：首页 > Web前端 > JavaScript

js事件流机制

2016-01-14 11:02 477 查看

点击窗体中的div是如何实现的，通过一段代码测试了一下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
document.addEventListener("click",function(){alert("点击body")},true);//true在捕获阶段响应，false在目标阶段响应
d1.addEventListener("click",function(){alert("点击black")},true);
d2.addEventListener("click",function(){alert("点击white")},true);
}
</script>
</head>
<body>
<div id="d1"style="background:black; width:600px;height:400px;">
<div id="d2" style="position: absolute;background:white;left:150px;top:60px;width:300px;height:300px;"></div>
</div>
</body>

document.addEventListener(“click”,function(){alert(“点击body”)},true);//true在捕获阶段响应，false在目标阶段响应，本程序中我设置的为true，所以在捕获阶段响应。

所以本例中我点击白色的div,依次弹出alert(“点击body”),alert(“点击black”),alert(“点击white”)(在捕获阶段响应)

如果我换成false,我点击白色的div,依次弹出alert(“点击white”),alert(“点击black”),alert(“点击body”)(在响应阶段响应)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航