偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

如何使用JavaScript的事件代理

開發(fā) 前端
如果你想進(jìn)一步了解如何用JavaScript來(lái)為網(wǎng)頁(yè)添加交互性的話,你也許已經(jīng)聽過(guò)JavaScript的事件代理(event delegation)了,并且會(huì)覺得只有那些牛烘烘的JavaScript程序員才會(huì)關(guān)心這樣復(fù)雜的設(shè)計(jì)模式。事實(shí)上,如果你已經(jīng)知道怎么樣去添加JavaScript的事件處理器(event handler),實(shí)現(xiàn)事件代理也是件輕而易舉的事情。

JavaScript事件是所有網(wǎng)頁(yè)交互性的根基(我指的是真正的互動(dòng)性,而不僅是那些CSS的下拉菜單)。在傳統(tǒng)的事件處理中,你按照需要為每一個(gè)元素添加或者是刪除事件處理器。然而,事件處理器將有可能導(dǎo)致內(nèi)存泄露或者是性能下降——你用得越多這種風(fēng)險(xiǎn)就越大。

JavaScript事件代理則是一種簡(jiǎn)單的技巧,通過(guò)它你可以把事件處理器添加到一個(gè)父級(jí)元素上,這樣就避免了把事件處理器添加到多個(gè)子級(jí)元素上。

它是怎么運(yùn)作的呢?

事件代理用到了兩個(gè)在JavaSciprt事件中常被忽略的特性:事件冒泡以及目標(biāo)元素。當(dāng)一個(gè)元素上的事件被觸發(fā)的時(shí)候,比如說(shuō)鼠標(biāo)點(diǎn)擊了一個(gè)按鈕,同樣的事件將會(huì)在那個(gè)元素的所有祖先元素中被觸發(fā)。這一過(guò)程被稱為事件冒泡;這個(gè)事件從原始元素開始一直冒泡到DOM樹的最上層。對(duì)任何一個(gè)事件來(lái)說(shuō),其目標(biāo)元素都是原始元素,在我們的這個(gè)例子中也就是按鈕。目標(biāo)元素它在我們的事件對(duì)象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事件處理器添加到一個(gè)元素上,等待事件從它的子級(jí)元素里冒泡上來(lái),并且可以很方便地判斷出這個(gè)事件是從哪個(gè)元素開始的。

這對(duì)我有什么好處呢?

想象一下現(xiàn)在我們有一個(gè)10列、100行的HTML表格,你希望在用戶點(diǎn)擊某一單元格的時(shí)候做點(diǎn)什么。比如說(shuō)有一次我就需要讓表格中的每一個(gè)單元格在被點(diǎn)擊的時(shí)候變成可編輯狀態(tài)。如果把事件處理器加到這1000個(gè)單元格將會(huì)產(chǎn)生一個(gè)很大的性能問題,并且有可能導(dǎo)致內(nèi)存泄露甚至是瀏覽器的崩潰。相反地,使用事件代理的話,你只需要把一個(gè)事件處理器添加到table元素上就可以了,這個(gè)函數(shù)可以把點(diǎn)擊事件給截下來(lái),并且判斷出是哪個(gè)單元格被點(diǎn)擊了。

用代碼寫出來(lái)的話是什么樣呢?

代碼很簡(jiǎn)單,我們所要關(guān)心的只是如何檢測(cè)目標(biāo)元素而已。比方說(shuō)我們有一個(gè)table元素,ID是“report”,我們?yōu)檫@個(gè)表格添加一個(gè)事件處理器以調(diào)用editCell函數(shù)。editCell函數(shù)需要判斷出傳到table來(lái)的事件的目標(biāo)元素??紤]到我們要寫的函數(shù)中可能會(huì)重復(fù)用到這一功能,所以我們把它單獨(dú)放到一個(gè)名為getEventTarget的函數(shù)中:

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

e這個(gè)變量表示的是一個(gè)事件對(duì)象,我們只需要寫一點(diǎn)點(diǎn)跨瀏覽器的代碼來(lái)返回目標(biāo)元素。在IE里目標(biāo)元素放在srcElement屬性中,而在其它瀏覽器里則是target屬性。

接下來(lái)就是editCell函數(shù)了,這個(gè)函數(shù)調(diào)用到了getEventTarget函數(shù)。一旦我們得到了目標(biāo)元素之后,剩下的事情就是看看它是否是我們所需要的那個(gè)元素了。

function editCell(e) {
  var target = getEventTarget(e);
  if(target.tagName.toLowerCase() === 'td') {
    // DO SOMETHING WITH THE CELL
  }
}

在editCell函數(shù)中,我們通過(guò)檢查目標(biāo)元素標(biāo)簽名稱的方法來(lái)確定它是否是一個(gè)表格的單元格。這種檢查也許過(guò)于簡(jiǎn)單了點(diǎn);如果它是這個(gè)目標(biāo)元素單元格里的另一個(gè)元素呢?我們需要為代碼做一點(diǎn)快速修改以便于其找出我們所需要的那個(gè)父級(jí)的td元素。如果說(shuō)有些單元格不需要被編輯怎么辦呢?此種情況下我們可以為那些不可編輯的單元格添加一個(gè)指定的樣式名稱,然后在把單元格變成可編輯狀態(tài)之前先檢查它是否不包含那個(gè)樣式名稱。選擇總是多樣化的,你只需找到適合你應(yīng)用程序的那一種就可以了。

有哪些優(yōu)點(diǎn)和缺點(diǎn)呢?

JavaScript事件代理帶來(lái)的好處有:

◆那些需要?jiǎng)?chuàng)建的以及駐留在內(nèi)存中的事件處理器少了。這是很重要的一點(diǎn),我們得到了性能上的提升,同時(shí)降低了崩潰的風(fēng)險(xiǎn)。

◆在DOM更新后無(wú)須重新綁定事件處理器了。如果你的頁(yè)面是動(dòng)態(tài)生成的,比如說(shuō)通過(guò)Ajax,你不需要再在元素被載入或者卸載的時(shí)候來(lái)添加或者刪除事件處理器了。

◆潛在的問題也許并不那么明顯,但是一旦你注意到這些問題,你就可以輕松地避免它們:

◆你的事件管理代碼有成為性能瓶頸的風(fēng)險(xiǎn),所以盡量使它能夠短小精悍。

◆不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一樣冒泡。事實(shí)上blur和focus可以用事件捕獲而非事件冒泡的方法獲得(在非IE的瀏覽器中),不過(guò)我們改天再說(shuō)這個(gè)吧。

◆在管理鼠標(biāo)事件的時(shí)候有些需要注意的地方。如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風(fēng)險(xiǎn)可就大了,因?yàn)閙ousemove事件觸發(fā)得非常頻繁。而mouseout則因?yàn)槠涔之惖谋憩F(xiàn)而變得很難用事件代理來(lái)管理。

總結(jié)

已經(jīng)有一些使用主流類庫(kù)的事件代理示例出現(xiàn)了,比如說(shuō)用jQuery、Prototype以及Yahoo! UI的。你也可以找到那些不用任何類庫(kù)的例子,比如說(shuō)Usable Type blog上的這一個(gè)。

在你需要的時(shí)候,事件代理將成為你工具箱里一件得心應(yīng)手的工具,而且它真的很容易實(shí)現(xiàn)。

【編輯推薦】

  1. JavaScript設(shè)計(jì)模式之抽象工廠及工廠方法模式
  2. Javascript開發(fā)相關(guān)知識(shí)總結(jié)
  3. Javascript面向?qū)ο蠡A(chǔ)以及接口和繼承類的實(shí)現(xiàn)
  4. 使用JavaScript更新UpdatePanel
責(zé)任編輯:楊鵬飛 來(lái)源: 譯言網(wǎng)
相關(guān)推薦

2016-09-14 21:28:25

JavaScript事件代理委托

2023-11-10 12:55:00

消息代理事件代理

2016-09-06 21:23:25

JavaScriptnode異步

2021-05-14 00:00:15

JavaScript開發(fā)代碼

2021-07-27 22:56:00

JavaScript編程開發(fā)

2015-05-19 11:11:29

JavaScript事件使用指南

2015-03-31 14:15:12

JavaJava事件通知

2023-08-08 08:00:00

架構(gòu)Kafka

2017-10-17 15:40:25

javascript刷新頁(yè)面

2023-06-27 09:42:38

OracleCKPTswitch

2014-11-25 10:03:42

JavaScript

2011-06-16 14:38:18

JavaScript事件委托

2009-10-20 14:58:15

Javascript事

2019-02-26 13:00:11

JavaScriptURL前端

2021-08-11 22:50:53

JavaScript編程開發(fā)

2010-01-22 14:28:24

使用C++

2021-11-11 11:24:54

JavaScript模型事件

2025-03-19 10:22:09

JavaScript編程語(yǔ)言開發(fā)

2019-04-23 15:20:26

JavaScript對(duì)象前端

2023-02-27 08:00:00

KEDA云計(jì)算Kubernetes
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)