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

js_事件流

2015-08-12 17:22 567 查看

JavaScript的事件是以一种流的形式存在的，一个事件会有多个元素同时相应。可分为三个阶段：

1、捕获阶段（查找目标）

2、目标阶段

3、冒泡阶段（由目标向外响应）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件流</title>
<script>
window.onload = function() {
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
document.addEventListener("click",function() {
alert("body")},true);//true,顺序为body、a、b，捕获阶段；false弹出顺序相反，冒泡阶段
a.addEventListener("click",function() {
alert("a")},true);
b.addEventListener("click",function() {
alert("b")},true);
c.addEventListener("click",function() {
alert("c")},true);
}
</script>
<style>
#a {
background:blue;
width:500px;
height:500px;
}
#b {
background:#eeeeee;
width:200px;
height:200px;
position:absolute;
left:100px;
top:100px;
}
#c {
background:#00ff00;
width:200px;
height:200px;
left:100px;
top:100px;
}
</style>
</head>

<body>
<div id="a">
<div id="b">

</div>
</div>
<div id="c">
</div>
</body>
</html>

（注：未完待续，望指教）

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

标签： javascript 事件流

相关文章推荐

新的分享

章节导航