夺命雷公狗---javascript NO:13 事件冒泡1

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leigood/p/5031874.html

文章标签：

#javascript #ViewUI

本文详细解释了事件冒泡的概念，通过实例演示如何在HTML页面中实现事件冒泡，并探讨了其在网页开发中的实际应用。

1、什么是事件冒泡

答：事件冒泡是指事件的响应会像水泡一样上升至最顶级对象，我们把这个特性就称之为事件冒泡。

例1：事件冒泡程序

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<style type=”text/css”>
div#div1{
width:500px;
height:500px;
background:red;
}
div#div2{
width:400px;
height:400px;
background:blue;
}
div#div3{
width:300px;
height:300px;
background:yellow;
}
</style>
<script src=”public.js”></script>
<script>
window.onload = function(){
addEvent($(‘div1′),’click’,function(){
alert(‘div1′);
})
addEvent($(‘div2′),’click’,function(){
alert(‘div2′);
})
addEvent($(‘div3′),’click’,function(){
alert(‘div3′);
})
}
</script>
</head>
<body>
<div id=”div1″>
<div id=”div2″>
<div id=’div3′></div>
</div>
</div>
</body>
</html>