Jquery dom 事件冒泡处理

1.什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件.forexample:

<tr>

<td>

<a../>

</td>

</tr>

当事件发生时,会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到其他外层元素。在我们的例子中，<a>会首先处理事件，然后按照顺序依次是<td>和<tr>.

2.事件冒泡的副作用

假设例子中的所有元素都被绑定了click事件。

<script type="text/javascript">
$(function(){
    // 为a元素绑定click事件
    $('a').bind("click",function(){
        var txt = $('#msg').html() + "<p>内层a元素被点击.<p/>";
        $('#msg').html(txt);
    });
    // 为td元素绑定click事件
    $('td').bind("click",function(){
        var txt = $('#msg').html() + "<p>外层td元素被点击.<p/>";
        $('#msg').html(txt);
    });

    // 为tr元素绑定click事件
    $("tr").bind("click",function(){
        var txt = $('#msg').html() + "<p>tr元素被点击.<p/>";
        $('#msg').html(txt);
    });
})
</script>

当单击a元素，即触发a元素的click事件时，会输出3条记录。只单击内部a元素，就会触发外部td元素和tr元素上绑定的click事件。这是由事件冒泡引起的。

3.阻止事件冒泡

<script type="text/javascript">
$(function(){
    // 为a元素绑定click事件
    $('a').bind("click",function(event){
        var txt = $('#msg').html() + "<p>内层a元素被点击.<p/>";
        $('#msg').html(txt);
       if (window.event) {  
         event.cancelBubble = true;  //ie
      }  else {
        event.stopPropagation();  //firefox
      } 
    });
    // 为td元素绑定click事件
    $('td').bind("click",function(event){
        var txt = $('#msg').html() + "<p>外层td元素被点击.<p/>";
        $('#msg').html(txt);
        if (window.event) {  
         event.cancelBubble = true;   //ie
      }  else {
        event.stopPropagation(); //firefox
      }
    });

    // 为tr元素绑定click事件
    $("tr").bind("click",function(event){
        var txt = $('#msg').html() + "<p>tr元素被点击.<p/>";
        $('#msg').html(txt);
        if (window.event) {  
         event.cancelBubble = true;   //ie
      }  else {
        event.stopPropagation(); //firefox
      } 
    });
})
</script>