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>最终页面显示效果：
点击"点我"按钮 会依次从内到外触发元素单击事件：
A.
B.
C
