jQuery事件的冒泡过程

Accumulating 2011-11-23 23:57:56 浏览 3,944 次

标签 jQuery 事件冒泡

严格来说，事件在触发后被分为两个阶段，一个是捕获(Capture)，另一个则是冒泡(Bubbling)。不过大多数浏览器不是都支持捕获阶段，jQuery也不支持，因此在事件触发后，往往执行冒泡过程。冒泡的实质就是事件执行中的顺序，通过以下例子来解释。

<!DOCTYPE HTML>
<html>
<head>
    <meta content=\"charset=utf-8\">
    <title>事件中的冒泡现象</title>
    <script type=\"text/javascript\" src=\"jquery-1.4.2.min.js\"> </script>
    <script type=\"text/javascript\">
  $(function(){
   $(\"#hr_three\").click(function() { alert(\"最里层\"); });
   $(\"#divTwo\").click(function() { alert(\"中间层\"); });
   $(\"#divOne\").click(function() { alert(\"最外层\"); });
  });
 </script>
</head>
<body>
 <div id=\"divOne\">
         <div id=\"divTwo\">
             <a id=\"hr_three\"  href= \"http://tinyliu.info\">点击我</a>
         </div>
    </div>
</body>
</html>

该页面分为三层，分别是divOne、divTwo和hr_three，他们都有各自的click事件。运行页面时点击“点击我”，会依次弹出“最里层”、“中间层”、“最外层”，然后链接到tinyliu.info。这就是事件的冒泡过程，虽然只点击了一次链接，但链接外围的divTwo的事件也被触发，同时divTwo的外围divOne的事件也随之被触发，一共执行了三次alert，从里到外。整个事件波及的过程就像水泡一样往外冒，故称为冒泡过程。

在实际需要中，很多时候并不希望事件的冒泡现象发生，jQuery中可通过两种方法来阻止冒泡过程的发生。

1. event.stopPropagation();

$(function(){
 $(\"#hr_three\").click(function() {
  alert(\"最里层\");
  event.stopPropagation();
 });
});

2. return false;

$(function(){
 $(\"#hr_three\").click(function() {
  alert(\"最里层\");
  return false;
 });
});

他们的区别在于stopPropagation只阻止冒泡过程(即只触发一次alert)，不会阻止事件的默认行为(跳转到tinyliu.info)；而return false不仅会阻止冒泡过程，也会组织事件的默认行为，alert完成后不会跳转到tinyliu.info。与此相关的还有一个preventDefault函数，此函数与return false相反，它不会阻止冒泡过程，但会阻止默认行为。

jQuery事件的冒泡过程

建议继续学习