javascript中的事件冒泡

来源：互联网发布：网络机柜照明灯编辑：程序博客网时间：2024/05/17 22:46
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件</title>    <script type="text/javascript" charset="UTF-8" src="../jquery/jquery-1.8.0.min.js"></script>    <style type="text/css">         *{             margin:0;padding:0;         }        body{            font-size:13px;            line-height:130%;            padding:60px;        }        #content{            width:220px;            border:1px solid #0050D0;            background:#96E555;        }        span{            width:200px;            margin:10px;            background:#666666;            cursor:pointer;            color:white;            display:block;        }        p{            width:200px;            background:#888;            color:white;            height: 16px;        }    </style></head><body><div id="content">    外层div元素    <span>内层span元素</span>    外层div元素</div><script type="text/javascript" charset="UTF-8">     $("span").bind("click",function(event){         alert("span clicked");         //event.stopPropagation();阻止事件冒泡     });     $("#content").bind("click",function(event){         alert("div clicked");         //event.stopPropagation();阻止事件冒泡     });     $("body").bind("click",function(){         alert("body clicked");     });</script></body></html>
0 0