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