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

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

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

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

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

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

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

復制代碼代碼如下:

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

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

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

您可能感興趣的文章: