這篇文章主要介紹了JQuery中DOM事件冒泡用法,實例分析了事件冒泡的原理與阻止冒泡的方法,需要的朋友可以參考下
本文實例分析了JQuery中DOM事件冒泡。分享給大家供大家參考。具體分析如下：
什么是冒泡
在頁面上可以有多個事件，也可以多個元素響應同一個事件。假設網頁上有兩個元素，其中一個元素嵌套在另一個元素里，并且都被綁定了click事件，同時body元素上也綁定了click事件。
- <div id="content">
- 外層div元素
- <span>內層span元素</span>
- 外層div元素
- </div>
- <script type="text/javascript">
- $(function(){
- // 為span元素綁定click事件
- $('span').bind("click",function(){
- var txt = $('#msg').html() + "<p>內層span元素被點擊.<p/>";
- $('#msg').html(txt);
- });
- // 為div元素綁定click事件
- $('#content').bind("click",function(){
- var txt = $('#msg').html() + "<p>外層div元素被點擊.<p/>";
- $('#msg').html(txt);
- });
- // 為body元素綁定click事件
- $("body").bind("click",function(){
- var txt = $('#msg').html() + "<p>body元素被點擊.<p/>";
- $('#msg').html(txt);
- });
- })
- </script>
當單擊內部span元素，即觸發span元素的click事件時，會輸出3條記錄。只單擊內部span元素，就會觸發外部div元素和body元素上綁定的click事件。這是由事件冒泡引起的。在單擊span元素的同時，也單擊了包含span元素的元素div和包含div元素的元素body，并且每一個元素都會按照特定的順序響應click事件。
元素的click事件會按照以下順序“冒泡”。
1. <span>
2. <div>
3. <body>
之所以稱為冒泡，是因為事件會按照DOM的層次結構像水泡一樣不斷向上直至頂端。
事件冒泡引發的問題
事件冒泡可能會引起預料之外的效果。上例中，本來只想觸發元素的click事件，然而
新聞熱點
疑難解答
圖片精選
