淺談jquery事件處理
更新時間：2015年04月24日 11:04:15 投稿：hebedich
這篇文章主要簡單介紹了jquery事件處理，十分的實用，有需要的小伙伴可以參考下。
在以jQuery為基礎(chǔ)庫的前端開發(fā)體系中，經(jīng)常會在一個頁面上通過各種標識綁定許許多多的事件。就算簡單的使用了事件代理，也還是造成了事件的分散，不好維護和管理。
那么，如何解決這個問題呢？而我，想到了backbone中的events。如下:
復(fù)制代碼 代碼如下:
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
}
也就是，把事件聚集到一起，類似事件處理中心這么一個概念。
簡單的理了一下實現(xiàn)思路：
使用事件代理的方式，將事件綁定到body節(jié)點。（某些事件自身是不冒泡的，在此暫時不做研究）
對于事件的執(zhí)行對象，給一個統(tǒng)一標識。
事件的執(zhí)行函數(shù)，集中處理。
復(fù)制代碼 代碼如下:
<body>
<div data-click-center="handler1"></div>
<div data-click-center="handler2"></div>
</body>
// 事件處理中心
var ClickEventCenter = {
"handler1": function () {
// do something...
},
"handler2": function () {
// do something...
}
// ...
}
// 事件綁定
$body.on("click", "[data-click-center]", function () {
var handlerName = $(this).data("click-center");
var handler = ClickEventCenter[handlerName]
if ($.isFunction(handler)) handler()
})
這樣的話，一種類型的事件，集中到一起。
在某些時候，能夠起到很好的作用。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能,結(jié)合完整實例形式分析了jQuery基于鼠標滾輪mousewheel事件進行頁面元素屬性動態(tài)操作的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
本文主要介紹了jquery手勢密碼插件的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果,結(jié)合完整實例形式分析了FusionCharts插件2D餅狀圖繪制相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jqGrid表格底部匯總、合計行footerrow處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
下面小編就為大家?guī)硪黄猨q checkbox 的全選并ajax傳參的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了jquery form表單序列化為對象具體實現(xiàn),需要的朋友可以參考下2014-03-03
在ASP.net中母版頁加載js文件，頁面中調(diào)用時出錯、tablesorter加載失敗等等,需要的朋友可以參考下2014-02-02
當點擊提交信息的時候，會把用戶在注冊甜的信息收集并以div彈出的方式提示個用戶預(yù)覽以確定信息的準確性，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
這篇文章主要介紹了jQuery中hide()方法用法,以實例形式較為詳細的分析了hide()方法的定義、功能與使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄O(shè)置jquery UI 控件的大小方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12