JavaScript示例六（事件冒泡与捕获）

最新推荐文章于 2025-09-27 10:40:03 发布

原创最新推荐文章于 2025-09-27 10:40:03 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web 专栏收录该内容

16 篇文章

订阅专栏

本文通过一个具体的HTML示例介绍了事件冒泡与事件捕获的概念及其在JavaScript中的实现方式。示例中包含了不同元素上的点击事件处理，展示了如何通过addEventListener设置事件监听器，并分别在冒泡阶段和捕获阶段触发不同的事件处理函数。

<html>
	<head>
		<title>
			事件冒泡与事件捕获示例
		</title>
		<style type="text/css">
			div{
				color:red;
			}
		</style>
	</head>
	<body>
	<div id="myDiv" class="main" onclick="alert('click div');">
		<p>div接受点击事件</p>
		<form method="post">
			<input type="text" name="username" value="zhang">
			<input type="button" id="mybtn" value="click me">
		</form>	
	</div>

	<ol id="dropdown">
		<li><a href="#">List item 1</a>
			<ol>
				<li><a href="#">List item 1.1</a></li>
				<li id="myli"><a href="#">List item 1.2</a></li>
				<li><a href="#">List item 1.3</a></li>
			</ol>
		</li>

	</ol>

	<script type="text/javascript">
		var btn=document.getElementById("mybtn");
		var myol=document.getElementById("dropdown");
		var myli=document.getElementById("myli");

		var handler=function(event){
			switch (event.type){
				case "click":
					alert("click button");
					break;
				/*
				case "mouseover":
					event.target.style.backgroundColor="green";
					alert(event.screenX+","+event.screenY);
					break;
				case "mouseout":
					event.target.style.backgroundColor="";
					break;
				*/
			}
		}

		var handler2=function(){
			alert("click ol");
		}

		var handler3=function(){
			alert("click li");
		}
		
		//冒泡阶段处理事件，自下而上执行
		btn.addEventListener("click",handler,false);
		btn.addEventListener("mouseover",handler,false);
		btn.addEventListener("mouseout",handler,false);
		
		//捕获阶段处理事件，自上而下执行
		myol.addEventListener("focus",handler2,true);
		myli.addEventListener("focus",handler3,true);
	</script>
	</body>
</html>