jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較實例分析
本文實例講述了jQuery事件模型默認行為執(zhí)行順序及trigger()與 triggerHandler()比較。分享給大家供大家參考,具體如下:
前言:
最近在工作中做需求時發(fā)現(xiàn)了一個詭異的事情,在使用jQuery觸發(fā)事件時,并不總是先執(zhí)行默認行為,再執(zhí)行綁定的事件行為,有時候可能是相反的順序。于是上網(wǎng)查找了下資料,還真有個外國哥們和我遇到同一個問題!整理下筆記先~ ~
默認行為執(zhí)行順序
一般來說,瀏覽器執(zhí)行事件的順序是:先執(zhí)行默認行為再執(zhí)行綁定的行為。
可是在 jquery 中有些時候會出現(xiàn)相反的順序,先執(zhí)行綁定的行為,再執(zhí)行默認行為。
那這里說的“有些時候”到底是什么時候呢?
看下面的代碼示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>jQuery Trigger and Default Behavior Demo</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> // When the DOM is ready, initialize. $(function(){ $( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Trigger click on the checkbox. $( "input" ).click(); } ); }); </script> </head> <body> <h1> jQuery Trigger and Default Behavior Demo </h1> <form> <input type="checkbox" /> <button>click checkbox</button> </form> </body> </html>
說明:頁面中有2個元素,一個是 input 元素,一個是button 元素,并分別綁定了click 事件。當直接點擊 input 元素時,alert結(jié)果為 true,input 的默認行為是在綁定的 click 事件之前發(fā)生的;當點擊 button 元素時,alert結(jié)果卻變成了 false,input 的默認行為是在綁定的 click 事件之后發(fā)生的;
細細體會其中的差別,發(fā)現(xiàn)當調(diào)用JQuery 的 $(selector) .click( )
或者$(selector).trigger('click')
來觸發(fā) selector 元素的click事件時, 默認行為會在綁定的 click 事件之后發(fā)生。
那么如果我們希望,任何情況下默認行為都在綁定的 click 事件之前發(fā)生怎么做呢?
最簡單的方法就是在觸發(fā) input 元素的 click 事件之前,手動設置 checkbox 的 checked
屬性,然后通過 triggerHandler()
來觸發(fā) click 事件(不觸發(fā)瀏覽器的默認行為)。代碼如下所示:
$( "input" ).click( function( objEvent ){ // Alert the checkboxed status. alert( this.checked ); } ); $( "button" ).click( function( objEvent ){ // Toggle checkbox checked status. $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked; // Trigger ONLY click event hanlders on the checkbox. $( "input" ).triggerHandler( "click" ); } );
jQuery中 trigger( ) 與 triggerHandler( ) 區(qū)別
共同點:
-
都能觸發(fā)通過 jquery 綁定的事件處理函數(shù),如
.on()/.bind()/.click(function(){ })
這些方式; -
都能觸發(fā)原生元素對象上的
on{eventType}
綁定的事件處理函數(shù);
不同點:
-
triggerHandler(‘event')
不會觸發(fā)原生元素對象上的.event()
方法(這種事件叫native event),而trigger(‘event')
則會;
瀏覽器的默認行為其實是執(zhí)行了原生元素對象上的.event()
方法?。。?/p> -
.triggerHandler()
只會觸發(fā)第一個匹配的元素上的事件,而trigger()
會觸發(fā)所有匹配元素的事件; -
.triggerHandler()
觸發(fā)的事件不會冒泡,而trigger()
會冒泡; -
.triggerHandler()
返回值可以是任意值,如果沒有明確 return 值,則為undefined
,而.trigger()永遠返回 jQuery object。所以使用.triggerHandler()時鏈式調(diào)用得自己實現(xiàn)。
使用 trigger( )與triggerHandler( )注意事項
有一次我用 trigger('click')
來觸發(fā)點擊事件時,鼠標并沒有改變位置,也就是說鼠標焦點沒有改變。測試了下發(fā)現(xiàn),trigger( )與triggerHandler( )觸發(fā)事件時并不會改變鼠標焦點,所以trigger('click')
方式觸發(fā)點擊事件這種方式,還是和用戶真正執(zhí)行點擊動作是不同的。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
- 淺談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序
- 簡述jQuery ajax的執(zhí)行順序
- jquery中ajax函數(shù)執(zhí)行順序問題之如何設置同步
- Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
- jQuery中(function(){})()執(zhí)行順序的理解
- 如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
- jquery $.ajax各個事件執(zhí)行順序
- jQuery中triggerHandler()方法用法實例
- jquery的trigger和triggerHandler的區(qū)別示例介紹
相關(guān)文章
在jquery中combobox多選的不兼容問題總結(jié)
最近在IE10中開發(fā)jquery,關(guān)于jquery中combobox多選不能兼容的問題,進行一些總結(jié),感興趣的朋友可以了解下2013-12-12JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
JQuery實現(xiàn)表格動態(tài)增加行,一直保持最下面有多個空白行。這樣可以避免一次增加太多行可能導致頁面內(nèi)容太多,反應變慢2014-07-07