JQuery中DOM事件冒泡實(shí)例分析
本文實(shí)例分析了JQuery中DOM事件冒泡。分享給大家供大家參考。具體分析如下:
什么是冒泡
在頁面上可以有多個(gè)事件,也可以多個(gè)元素響應(yīng)同一個(gè)事件。假設(shè)網(wǎng)頁上有兩個(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í),會輸出3條記錄。只單擊內(nèi)部span元素,就會觸發(fā)外部div元素和body元素上綁定的click事件。這是由事件冒泡引起的。在單擊span元素的同時(shí),也單擊了包含span元素的元素div和包含div元素的元素body,并且每一個(gè)元素都會按照特定的順序響應(yīng)click事件。
元素的click事件會按照以下順序“冒泡”。
1. <span>
2. <div>
3. <body>
之所以稱為冒泡,是因?yàn)槭录凑誅OM的層次結(jié)構(gòu)像水泡一樣不斷向上直至頂端。
事件冒泡引發(fā)的問題
事件冒泡可能會引起預(yù)料之外的效果。上例中,本來只想觸發(fā)<span>元素的click事件,然而<div>元素和<body>元素的click事件也同時(shí)被觸發(fā)了。因此,有必要對事件的作用范圍進(jìn)行限制。當(dāng)單擊<span>元素時(shí),只觸發(fā)<span>元素的click事件,而不觸發(fā)<div>元素和<body>元素的click事件:當(dāng)單擊<div>元素時(shí),只觸發(fā)<div>元素的click事件,而不觸發(fā)<body>元素的click事件。
事件對象
由于IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對象的方法各不相同,導(dǎo)致在不同瀏覽器中獲取事件對象變得比較困難。針對這個(gè)問題,JQuery進(jìn)行了必要的擴(kuò)展和封裝,從而使得在任何瀏覽器中都能很輕松地獲取事件對象以及事件對象的一些屬性。
在程序中使用事件對象非常簡單,只需要為函數(shù)添加一個(gè)參數(shù),jQuery代碼如下:
$("element").bind("click",function(event){ //event : 事件對象 //... });
這樣,當(dāng)單擊“element”元素時(shí),事件對象就被創(chuàng)建了。這個(gè)事件對象只有事件處理函數(shù)才能訪問到。事件處理函數(shù)執(zhí)行完畢后,事件對象就被銷毀。
停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理函數(shù)被執(zhí)行。在JQuery中提供了stopPropagation()方法來停止事件冒泡。
$(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í),只會觸發(fā)<span>元素上的click事件,而不會觸發(fā)<div>元素和<body>元素的click事件??梢杂猛瑯拥姆椒ń鉀Q<div>元素上的冒泡問題。
$('#content').bind("click",function(event){ var txt = $('#msg').html() + "<p>外層div元素被點(diǎn)擊.<p/>"; $('#msg').html(txt); event.stopPropagation(); // 阻止事件冒泡 });
這樣,當(dāng)單擊<span>元素或者<div>元素時(shí),就只會輸出相應(yīng)的內(nèi)容,而不會輸出其他的內(nèi)容。
阻止默認(rèn)行為
網(wǎng)頁中的元素有自己默認(rèn)的行為,例如,單擊超鏈接后會跳轉(zhuǎn)、單擊“提交”按鈕后表單會提交,有時(shí)需要阻止元素的默認(rèn)行為。
在JQuery中,提供了preventDefault()方法來阻止元素的默認(rèn)行為。
舉一個(gè)例子,在項(xiàng)目中,經(jīng)常需要驗(yàn)證表單,在單擊“提交”按鈕時(shí),驗(yàn)證表單內(nèi)容,例如某元素是否是必填字段,某元素長度是否夠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í),單擊“提交”按鈕,會出現(xiàn)提示,并且表單不能提交。只有在用戶名里輸入內(nèi)容后,才能提交表單??梢?,preventDefault()方法能阻止表單的提交行為。
如果想同時(shí)對事件對象停止冒泡和默認(rèn)行為,可以在事件處理函數(shù)中返同false。這是對在事件對象上同時(shí)調(diào)用stopPrapagation()方法和preventDefault()方法的一種簡寫方式。
在表單的例子中,可以把 event.preventDefault(); 改寫為: return false;
也可以把事件冒泡例子中的 event.stopPropaqation(); 改寫為: return false;
事件捕獲
事件捕獲和事件冒泡是剛好相反的兩個(gè)過程,事件捕獲是從最頂端往下開始觸發(fā)。還是冒泡事件的例子,其中元素的click事件會按照以下順序捕獲。
1. <body>
2. <div>
3. <span>
很顯然,事件捕獲是從最外層元素開始,然后再到最里層元素。因此綁定的click事件,首先會傳遞給<body>元素,然后傳遞給<div>元素,最后才傳遞給<span>元素。
遺憾的是,并非所有主流瀏覽器都支持事件捕獲,并且這個(gè)缺陷無法通過JavaScript來修復(fù)。JQuery不交持事件捕獲,如果讀者需要使用事件捕獲,請直接使用原生的JavaScript。
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
- 深入理解JS DOM事件機(jī)制
- 理解javascript中DOM事件
- 談?wù)勎覍avaScript DOM事件的理解
- DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
- JQuery中DOM事件合成用法實(shí)例分析
- JQuery中DOM事件綁定用法詳解
- JavaScript DOM事件(筆記)
- Google Map V3 綁定氣泡窗口(infowindow)Dom事件實(shí)現(xiàn)代碼
- JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
- 關(guān)于javascript DOM事件模型的兩件事
- DOM 事件的深入淺出(二)
相關(guān)文章
jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
這篇文章主要介紹了jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jquery下利用jsonp跨域訪問實(shí)現(xiàn)方法
客戶端的跨域訪問,可以通過jsonp方式來實(shí)現(xiàn),jquery提供了跨域訪問的方法,jQuery.ajax()支持get方式的跨域。當(dāng)然支持跨域還需要服務(wù)器端相應(yīng)的處理。2010-07-07jquery+json實(shí)現(xiàn)的搜索加分頁效果
Javascript,json 實(shí)現(xiàn)的js 腳本搜索,加分頁,附源碼2010-03-03jQuery對val和atrr("value")賦值的區(qū)別介紹
jQuery中val和atrr(value),對瀏覽器的區(qū)別,有默認(rèn)值的情況下,如果用val()賦值了,那么當(dāng)修改這個(gè)值得時(shí)候,google不能獲取最新的值,但是ie可以2014-09-09jQuery根據(jù)name屬性進(jìn)行查找的用法分析
這篇文章主要介紹了jQuery根據(jù)name屬性進(jìn)行查找的用法,結(jié)合實(shí)例形式分析了jQuery各種常見name屬性獲取元素的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-06-06jQuery EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例
下面小編就為大家?guī)硪黄猨Query EasyUI 右鍵菜單--關(guān)閉標(biāo)簽/選項(xiàng)卡的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10