js_事件流

最新推荐文章于 2023-05-19 21:54:28 发布

「已注销」

最新推荐文章于 2023-05-19 21:54:28 发布

阅读量447

点赞数

分类专栏： JavaScript学习文章标签： javascript 事件流

本文链接：https://blog.csdn.net/fang0609/article/details/47447869

版权

JavaScript学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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">
<!--<body onclick = "javascript:alert('点击body');">
<div id="a" onclick = "javascript:alert('点击a');">
<div id="b" onclick = "javascript:alert('点击b');">-->
</div>
</div>
<div id="c">
</div>
</body>
</html>

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