JavaScript示例六（事件冒泡与捕获）-优快云博客

本文链接：https://blog.youkuaiyun.com/zjc/article/details/41527491

<html>
	<head>
		<title>
			事件冒泡与事件捕获示例
		</title>
		<style type="text/css">
			div{
				color:red;
			}
		</style>
	</head>
	<body>
	<div id="myDiv" class="main" οnclick="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>