本文實(shí)例分析了JQuery中DOM事件冒泡。分享給大家供大家參考。具體分析如下：
什么是冒泡
在頁(yè)面上可以有多個(gè)事件，也可以多個(gè)元素響應(yīng)同一個(gè)事件。假設(shè)網(wǎng)頁(yè)上有兩個(gè)元素，其中一個(gè)元素嵌套在另一個(gè)元素里，并且都被綁定了click事件，同時(shí)body元素上也綁定了click事件。
<div id="content"> 外層div元素 <span>內(nèi)層span元素</span> 外層div元素</div>
<script type="text/javascript">$(function(){ // 為span元素綁定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>內(nèi)層span元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); }); // 為div元素綁定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外層div元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); }); // 為body元素綁定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); });})</script>當(dāng)單擊內(nèi)部span元素，即觸發(fā)span元素的click事件時(shí)，會(huì)輸出3條記錄。只單擊內(nèi)部span元素，就會(huì)觸發(fā)外部div元素和body元素上綁定的click事件。這是由事件冒泡引起的。在單擊span元素的同時(shí)，也單擊了包含span元素的元素div和包含div元素的元素body，并且每一個(gè)元素都會(huì)按照特定的順序響應(yīng)click事件。
元素的click事件會(huì)按照以下順序“冒泡”。
1. <span>
2. <div>
3. <body>
之所以稱為冒泡，是因?yàn)槭录?huì)按照DOM的層次結(jié)構(gòu)像水泡一樣不斷向上直至頂端。
事件冒泡引發(fā)的問(wèn)題
事件冒泡可能會(huì)引起預(yù)料之外的效果。上例中，本來(lái)只想觸發(fā)<span>元素的click事件，然而<div>元素和<body>元素的click事件也同時(shí)被觸發(fā)了。因此，有必要對(duì)事件的作用范圍進(jìn)行限制。當(dāng)單擊<span>元素時(shí)，只觸發(fā)<span>元素的click事件，而不觸發(fā)<div>元素和<body>元素的click事件：當(dāng)單擊<div>元素時(shí)，只觸發(fā)<div>元素的click事件，而不觸發(fā)<body>元素的click事件。
事件對(duì)象
由于IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對(duì)象的方法各不相同，導(dǎo)致在不同瀏覽器中獲取事件對(duì)象變得比較困難。針對(duì)這個(gè)問(wèn)題，JQuery進(jìn)行了必要的擴(kuò)展和封裝，從而使得在任何瀏覽器中都能很輕松地獲取事件對(duì)象以及事件對(duì)象的一些屬性。
在程序中使用事件對(duì)象非常簡(jiǎn)單，只需要為函數(shù)添加一個(gè)參數(shù)，jQuery代碼如下：
$("element").bind("click",function(event){ //event : 事件對(duì)象 //... });這樣，當(dāng)單擊“element”元素時(shí)，事件對(duì)象就被創(chuàng)建了。這個(gè)事件對(duì)象只有事件處理函數(shù)才能訪問(wèn)到。事件處理函數(shù)執(zhí)行完畢后，事件對(duì)象就被銷毀。
停止事件冒泡
停止事件冒泡可以阻止事件中其他對(duì)象的事件處理函數(shù)被執(zhí)行。在JQuery中提供了stopPropagation()方法來(lái)停止事件冒泡。
$(function(){ // 為span元素綁定click事件 $('span').bind("click",function(event){ var txt = $('#msg').html() + "內(nèi)層span元素被點(diǎn)擊"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 });})當(dāng)單擊<span>元素時(shí)，只會(huì)觸發(fā)<span>元素上的click事件，而不會(huì)觸發(fā)<div>元素和<body>元素的click事件。可以用同樣的方法解決<div>元素上的冒泡問(wèn)題。
$('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外層div元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 });這樣，當(dāng)單擊<span>元素或者<div>元素時(shí)，就只會(huì)輸出相應(yīng)的內(nèi)容，而不會(huì)輸出其他的內(nèi)容。
阻止默認(rèn)行為
網(wǎng)頁(yè)中的元素有自己默認(rèn)的行為，例如，單擊超鏈接后會(huì)跳轉(zhuǎn)、單擊“提交”按鈕后表單會(huì)提交，有時(shí)需要阻止元素的默認(rèn)行為。
在JQuery中，提供了preventDefault()方法來(lái)阻止元素的默認(rèn)行為。
舉一個(gè)例子，在項(xiàng)目中，經(jīng)常需要驗(yàn)證表單，在單擊“提交”按鈕時(shí)，驗(yàn)證表單內(nèi)容，例如某元素是否是必填字段，某元素長(zhǎng)度是否夠6位等，當(dāng)表單不符合提交條件時(shí)，要阻止表單的提交（默認(rèn)行為）。
<form action="test.html">用戶名：<input type="text" id="username" /><br/><input type="submit" value="提交" id="sub"/></form>
$(function(){ $("#sub").bind("click",function(event){ var username = $("#username").val(); //獲取元素的值 if(username==""){ //判斷值是否為空 $("#msg").html("<p>文本框的值不能為空.</p>"); //提示信息 event.preventDefault(); //阻止默認(rèn)行為 ( 表單提交 ) } })})當(dāng)用戶名為空時(shí)，單擊“提交”按鈕，會(huì)出現(xiàn)提示，并且表單不能提交。只有在用戶名里輸入內(nèi)容后，才能提交表單。可見(jiàn)，preventDefault()方法能阻止表單的提交行為。
如果想同時(shí)對(duì)事件對(duì)象停止冒泡和默認(rèn)行為，可以在事件處理函數(shù)中返同false。這是對(duì)在事件對(duì)象上同時(shí)調(diào)用stopPrapagation()方法和preventDefault()方法的一種簡(jiǎn)寫方式。
在表單的例子中，可以把 event.preventDefault(); 改寫為： return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改寫為： return false;
事件捕獲
事件捕獲和事件冒泡是剛好相反的兩個(gè)過(guò)程，事件捕獲是從最頂端往下開(kāi)始觸發(fā)。還是冒泡事件的例子，其中元素的click事件會(huì)按照以下順序捕獲。
1. <body>
2. <div>
3. <span>
很顯然，事件捕獲是從最外層元素開(kāi)始，然后再到最里層元素。因此綁定的click事件，首先會(huì)傳遞給<body>元素，然后傳遞給<div>元素，最后才傳遞給<span>元素。
遺憾的是，并非所有主流瀏覽器都支持事件捕獲，并且這個(gè)缺陷無(wú)法通過(guò)JavaScript來(lái)修復(fù)。JQuery不交持事件捕獲，如果讀者需要使用事件捕獲，請(qǐng)直接使用原生的JavaScript。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
