淺談jquery事件處理
在以jQuery為基礎(chǔ)庫的前端開發(fā)體系中，經(jīng)常會(huì)在一個(gè)頁面上通過各種標(biāo)識(shí)綁定許許多多的事件。就算簡(jiǎn)單的使用了事件代理，也還是造成了事件的分散，不好維護(hù)和管理。
那么，如何解決這個(gè)問題呢？而我，想到了backbone中的events。如下:
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ù)，集中處理。
<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的優(yōu)點(diǎn)比較多，大家可以學(xué)習(xí)下，網(wǎng)上好多效果都是用jquery實(shí)現(xiàn)的。2009-04-04
為了避免和美工沖突，對(duì)特定操作對(duì)象加上id標(biāo)識(shí)，美工不大改也沒什么問題。2011-01-01
jQuery中常用動(dòng)畫效果函數(shù)知識(shí)點(diǎn)整理
這篇文章我們給大家整理了關(guān)于jQuery中常用動(dòng)畫效果函數(shù)的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友可以學(xué)習(xí)下。2018-08-08
Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后，刷新第一個(gè)DataGrid框體，下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集2014-01-01
jQuery 實(shí)現(xiàn)自動(dòng)填充郵箱功能（帶下拉提示）
本文用 jQuery 實(shí)現(xiàn)一個(gè)用戶輸入字符時(shí)出現(xiàn)能夠提示郵箱后綴名的下拉菜單，并且在選擇下拉菜單中的郵箱后綴名后可自動(dòng)填充未完成的輸入框。2014-10-10
jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法
這篇文章主要介紹了jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法,涉及jQuery針對(duì)瀏覽器的判定及頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-03-03
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，EasyUI創(chuàng)建樹形菜單，內(nèi)容很豐富，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
jQuery toggleClass應(yīng)用實(shí)例(附效果圖)
這篇文章主要介紹了jQuery toggleClass的應(yīng)用,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jquery獲取select選中值的方法,結(jié)合實(shí)例詳細(xì)分析了jQuery獲取select選中項(xiàng)option文本值及value值的方法,同時(shí)給出了JavaScript獲取select選中項(xiàng)的技巧,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)網(wǎng)頁拼圖游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)網(wǎng)頁拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11