淺談jquery事件處理
在以jQuery為基礎(chǔ)庫的前端開發(fā)體系中,經(jīng)常會在一個頁面上通過各種標(biāo)識綁定許許多多的事件。就算簡單的使用了事件代理,也還是造成了事件的分散,不好維護(hù)和管理。
那么,如何解決這個問題呢?而我,想到了backbone中的events。如下:
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
}
也就是,把事件聚集到一起,類似事件處理中心這么一個概念。
簡單的理了一下實(shí)現(xiàn)思路:
使用事件代理的方式,將事件綁定到body節(jié)點(diǎn)。(某些事件自身是不冒泡的,在此暫時不做研究)
對于事件的執(zhí)行對象,給一個統(tǒng)一標(biāo)識。
事件的執(zhí)行函數(shù),集中處理。
<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實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能,結(jié)合完整實(shí)例形式分析了jQuery基于鼠標(biāo)滾輪mousewheel事件進(jìn)行頁面元素屬性動態(tài)操作的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的2D餅狀圖效果,結(jié)合完整實(shí)例形式分析了FusionCharts插件2D餅狀圖繪制相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jq checkbox 的全選并ajax傳參的實(shí)例
下面小編就為大家?guī)硪黄猨q checkbox 的全選并ajax傳參的實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04jQuery獲取注冊信息并提示實(shí)現(xiàn)代碼
當(dāng)點(diǎn)擊提交信息的時候,會把用戶在注冊甜的信息收集并以div彈出的方式提示個用戶預(yù)覽以確定信息的準(zhǔn)確性,感興趣的朋友可以參考下,希望對你有所幫助2013-04-04