JQuery中DOM事件冒泡實例分析

2024-05-06 16:22:24

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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事件，然而

元素和

元素的click事件也同時被觸發了。因此，有必要對事件的作用范圍進行限制。當單擊元素時，只觸發元素的click事件，而不觸發

元素和

上一篇：JQuery中DOM加載與事件執行實例分析

下一篇：JQuery中DOM事件合成用法實例分析