jQuery 中的事件冒泡和阻止默认行为

1、事件冒泡

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 <%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
     <head>
           <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
         <script type="text/javascript">
             $(function() {
                 //为 <span> 元素绑定 click 事件
                 $("span").click(function() {
                     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
                 });
                 //为 Id 为 content 的 <div> 元素绑定 click 事件
                 $("#content").click(function() {
                     $("#msg").html($("#msg").html() + "<p>外层div元素被单击</p>");
                 });
                 //为 <body> 元素绑定 click 事件
                 $("body").click(function() {
                     $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
                 });
             });
         </script>      

         <!-- CSS -->
         <style type="text/css">
             #content {
                 background: #b17af5;
             }
         </style>
       </head>

       <!-- HTML -->
       <body>
           <div id="content">
               外层div元素<br />
               <span style="background: silver;">内层span元素</span><br />
               外层div元素
           </div><br />
           <div id="msg"></div>
       </body>
 </html>

当点击内部 <span> 元素时，会触发自身及外层 <div> 和 <body> 的点击事件，这就是事件冒泡引起的。事件会随着 DOM 的层次结构依次向上传播。

事件冒泡可能会引起意料之外的效果，有时候需要阻止事件的冒泡行为，使用 stopPropagation() 方法来实现。
修改 <span> 元素的 click 事件函数：

 //为 <span> 元素绑定 click 事件
 $("span").click(function(event) {    //为方法添加一个事件对象参数
     $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
     event.stopPropagation();    //阻止 <span> 的 click 事件冒泡
 });

此时点击内部 <span> 元素时，只会触发自身的 click 事件，不会再向上冒泡。