快捷導(dǎo)航

不要使用jQuery觸發(fā)原生事件的方法

更新時(shí)間：2014年03月03日 17:39:46 作者：

這篇文章主要介紹了不要使用jQuery觸發(fā)原生事件的方法,需要的朋友可以參考下

JavaScript 框架提供了如此多的功能,以至于一不小心就會(huì)掉進(jìn)坑里去。對(duì)工具庫(kù)依賴得越多,在修改或維護(hù)時(shí)一個(gè)小小的改的很可能就會(huì)影響到其他的功能(俗稱處處是地雷,走路需謹(jǐn)慎),特別是維護(hù)多年前的遺留代碼時(shí)。我經(jīng)?？吹降囊粋€(gè)錯(cuò)誤是關(guān)于 jQuery的 trigger, trigger允許開(kāi)發(fā)者手動(dòng)觸發(fā)某些事件。這個(gè)功能真的非常強(qiáng)大與好用,但是請(qǐng)遵守約定,不要觸發(fā)JS中那些原生的事件名稱!
注:我知道,其他JS框架也提供這種功能 —— 我只用jQuery作為一個(gè)例子,因?yàn)槲铱吹搅怂氖軞g迎程度,最近又剛好碰上這個(gè)問(wèn)題。而所有工具類(lèi)庫(kù)都有可能引發(fā)同樣的問(wèn)題。比如 MooTools使用的 fireEvent 等。
下面是使用 trigger 來(lái)完成任務(wù)的一個(gè)典型例子:

復(fù)制代碼代碼如下:

 
// 監(jiān)聽(tīng) click 事件 
jQuery('.tabs a').on('click', function() { 
// 執(zhí)行某些操作,比如切換界面,加載內(nèi)容等.. 
}); 

// 在最后一個(gè) a 標(biāo)簽上觸發(fā) click 事件 
jQuery('.tabs a').last().trigger('click'); 

上面的代碼將會(huì)打開(kāi)給定index的tab標(biāo)簽。我完全理解開(kāi)發(fā)者使用 trigger 來(lái)處理這些事情的原因,通常是因?yàn)橐|發(fā)的函數(shù)在全局范圍內(nèi)不可用,而觸發(fā)事件是很容易的,也總是可用的。問(wèn)題是,使用原生的事件名稱來(lái)觸發(fā)可能 ... 觸發(fā) ... 一些無(wú)法言說(shuō)的傷。讓我們來(lái)看看在網(wǎng)站的其他地方添加的內(nèi)容:

復(fù)制代碼代碼如下:

 
// 監(jiān)聽(tīng) body 內(nèi)部的所有 click 事件 
jQuery('body').on('click', 'a', function() { 
// 此處可以進(jìn)行一些業(yè)務(wù)邏輯處理 ... 

// 滿足條件(Condition met), 則進(jìn)行另外一些操作! 
if(conditionMet) { 
// 刷新頁(yè)面? 
// 打開(kāi)子菜單? 
// 提交表單? 
// ... 燈燈蹬蹬,Intel 
} 
}); 

現(xiàn)在有一個(gè)問(wèn)題 —— 選項(xiàng)卡單擊事件可能被其他完全獨(dú)立的部分監(jiān)聽(tīng)著,這處理起來(lái)就比較麻煩。呵呵,最好的解決方案是使用一個(gè)自定義的事件名稱跟在原生事件后面:

復(fù)制代碼代碼如下:

 
// 監(jiān)聽(tīng) click 事件時(shí),帶上自定義的事件 
jQuery('.tabs a').on('click tabs-click', function() { 
// 切換 tab, 加載內(nèi)容,等等等等 ... 
}); 

// 在最后一個(gè)標(biāo)簽上觸發(fā) "假" 的事件 
jQuery('.tabs a').last().trigger('tabs-click'); 

現(xiàn)在你的事件觸發(fā)器將不再和頁(yè)面上的其他監(jiān)聽(tīng)器起沖突。保守的開(kāi)發(fā)人員對(duì)我說(shuō),你可能想要避免使用 trigger (其他工具庫(kù)也是一樣的),但好歹你也應(yīng)該添加一個(gè)自定義事件名稱!

您可能感興趣的文章: