Web开发基础-JavaScript-25

Coder_Boy_

于 2018-07-21 18:37:24 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/81147773

Web开发专栏收录该内容

108 篇文章

订阅专栏

JS中事件冒泡机制

案例概念解析

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件冒泡</title>
		<style type="text/css">
		
			div {
				border:1px solid red;
				width:300px;
			}
		
			p {
				border:1px solid blue;
				width:150px;
				margin:30px auto;
			}
			
			input {
				margin:30px auto;
			}
		</style>
		<script type="text/javascript">
		
			function f1(){
				alert("div");
			}
			
			function f2(){
				alert("p");
			}
			
			function f3(){
				
				alert("button");
			}
		
		</script>
	</head>
	<body>
		<div onclick="f1();">
			<p onclick="f2();">
				<input type="button" value="点我" onclick="f3();">
			</p>
		
		</div>
	
	</body>
</html>

最终页面显示效果：

点击"点我"按钮会依次从内到外触发元素单击事件：