JavaScript 事件冒泡机制

       html的DOM是层级包含关系的,比如嵌套的DIV，如果三个DIV都绑定了事件的话，最内层的DIV的事件触发会导致父级DIV所绑定的事件的触发，就像湖水里面底层的气泡在从底部到湖面会触发各个深度的事件一样。html的DOM的这种机制有时候会给我们带来麻烦，因为我只是希望我所操作的那个对象的事件触发，而并不希望他的父级对象的事件触发,对于这种情况下，我们可以通过代码在某个层级上来阻止事件继续冒泡，这样的话哪些我们不希望触发事件的那些对象的事件就不会触发了。

       下面的例子中有三个DIV，最外层是DIV1，中间是DIV2，最内层是DIV3，如果不采取措施去阻止冒泡机制的话，DIV3的点击会触发DIV2及DIV1的事件触发。例子的页面代码如下，这里是Razor的语言的页面。

@{
    Layout = null;
}
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#div1").click(function (event) {
            alert("div1");
        });

        $("#div2").click(function (event) {
            event.stopPropagation(); 
            alert("div2");
        });

        $("#div3").click(function (event) {
            alert("div3");
        });
    });
</script>

<div id="div1" style="width:400; height:300; background-color:Blue">DIV1
    <div id="div2" style="width:300; height:200; background-color:Yellow">DIV2
        <div id="div3" style="width:200; height:100; background-color:Red">DIV3</div>
    </div>
</div>

页面运行效果如下：

当我们点击DIV3时，我们会发现依次弹出DIV23，DIV2，DIV1

那么如何阻止冒泡呢？我们修改DIV2的事件如下：

$("#div2").click(function (event) {
      //result += "[div2]";
      event.stopPropagation();
      alert("div2");
});

这时候只会弹出DIV3和DIV2

这样DIV1的事件就不会触发了，阻止了冒泡。