jQuery事件的冒泡过程

最新推荐文章于 2022-11-10 10:58:50 发布

load_life

最新推荐文章于 2022-11-10 10:58:50 发布

阅读量477

点赞数

分类专栏： jquery 文章标签： jquery function 浏览器

jquery 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

严格来说，事件在触发后被分为两个阶段，一个是捕获（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();

1

2

3

4

5

6

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

2. return false;

1

2

3

4

5

6

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

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