談JavaScript中的事件委托
事件是對象發(fā)送的消息，以發(fā)信號通知操作的發(fā)生。委托是可保存對方法的引用的類。下面介紹javascript中的事件和委托，供參考。
由于事件處理程序可以為現(xiàn)代Web應(yīng)用程序提供交互能力，因此許多開發(fā)人員會(huì)不分青紅皂白地向頁面中添加大量的處理程序，在創(chuàng)建GUI的語言（如#C）中，為GUI中的每個(gè)按鈕添加一個(gè)onclick事件處理程序是司空見慣的事，而且這樣做也不會(huì)導(dǎo)致什么問題?？墒窃贘avaScript中，添加到頁面上的事件處理程序數(shù)量關(guān)系到頁面的整體運(yùn)行性能。
導(dǎo)致這一問題的原因是多方面的。首頁，每個(gè)都是對象，都會(huì)占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導(dǎo)致DOM訪問次數(shù)，會(huì)延遲整個(gè)頁面的交互就緒時(shí)間。事實(shí)上，從如何利用好事件處理程序的角度出發(fā)，還是有一些方法能夠提升性能的。
對“事件處理程序過多”問題的解決方案是事件委托。事件委托利用了事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。例如，click事件會(huì)一直冒泡到document層次。也就是說，我們可以為整個(gè)頁面指定一個(gè)onclick事件處理程序，而不必給每個(gè)可單擊的元素分別添加事件處理程序。以下面的HTML代碼為例：
- <ul id="myLinks">
- <li id="goSomewhere">Go somewhere</li>
- <li id="doSomething">Go somewhere</li>
- <li id="sayHi">Say hi</li>
- </ul>
其中包含3個(gè)被單擊后會(huì)執(zhí)行操作的列表項(xiàng)。按照傳統(tǒng)的做法是，需要像下面這樣為它們添加3個(gè)事件處理程序：
- var item1=document.getElementById("goSomewhere");
- var item1=document.getElementById("doSomething");
- var item1=document.getElementById("sayHi");
- EventUtil.addHandler(item1,"click",function(event){
- location.href="http://www.yiiyaa.net";
- });
- EventUtil.addHandler(item2,"click",function(event){
- document.title="I changed the document's title";
- });
- EventUtil.addHandler(item2,"click",function(event){
- alert("Say hi");
- });
如果在一個(gè)復(fù)雜的Web應(yīng)用程序中，對所有可單擊的元素都采用這種形式，那么結(jié)果就會(huì)有數(shù)不清的代碼用于添加事件處理程序。此時(shí)，可以利用事件委托技術(shù)解決這個(gè)問題。使用事件類型，只需在DOM樹中盡量***的層次上添加一個(gè)事件處理程序，如下面的例子所示：
- var list=document.getElementById("myLinks");
- EventUtil.addHandler(list,"click",function(event){
- event=EventUtil.getEvent(event);
- var target=EventUtil.getTarget(event);
- switch(target.id){
- case "doSomething":
- document.title="I changed the document's title";
- break;
- case "goSomewhere":
- location.href="http://www.yiiyaa.net";
- break;
- case "sayHi":
- alert("Say hi");
- break;
- }
- });
在這段代碼里，我們使用事件委托只為<ul>元素添加了一個(gè)onclick事件處理程序，由于所有列表項(xiàng)都是這個(gè)元素的子節(jié)點(diǎn)，而且它們的事件會(huì)冒泡，所以單擊事件最終會(huì)被這個(gè)函數(shù)處理。我們知道，事件目標(biāo)是被單擊的列表項(xiàng)，故而可以通過檢測id屬性來決定采用適當(dāng)?shù)牟僮鳌Ｅc前面未使用事件委托的代碼比一比，會(huì)發(fā)現(xiàn)這段代碼的事前消耗更低，因?yàn)橹蝗〉昧艘粋€(gè)DOM元素，只添加了一個(gè)事件處理程序。雖然對用戶來說最終的結(jié)果相同。但這種技術(shù)需要占用的內(nèi)存更少。所有用到按鈕的事件（多數(shù)鼠標(biāo)事件和鍵盤事件）都適合采用事件委托技術(shù)。
如果可行的話，也可以考慮為document對象添加一個(gè)事件處理程序，用以處理頁面上發(fā)生的某種特定類型的事件。這樣做與采取傳統(tǒng)的做法相比具有如下優(yōu)點(diǎn)：
1、document對象很快就可以訪問，而且可以在頁面生命周期的任何時(shí)點(diǎn)上為它添加事件處理程序（無需等待DOMContentLoaded或load事件）。換句話說，只要可單擊的元素呈現(xiàn)在頁面上，就可以立即具備適當(dāng)?shù)墓δ堋?/p>
2、在頁面中設(shè)置事件處理程序所需的時(shí)間更少。只添加一個(gè)事件處理程序所需的DOM引用更少，所花的時(shí)間也更少。
3、整個(gè)頁面占用的內(nèi)存空間更少，能夠提升整體性能。
最適合采用事件委托技術(shù)的事件包括click,mousedown,mouseup,keydown,keyup和keypress,雖然mouseover和mouseout事件也冒泡，但要適當(dāng)處理它們并不容易，而且經(jīng)常需要計(jì)算元素的位置（因?yàn)楫?dāng)鼠標(biāo)從一個(gè)元素移到其他子節(jié)點(diǎn)時(shí)，或者當(dāng)鼠標(biāo)移出該元素時(shí)，都會(huì)觸發(fā)mouseout事件）。
本文地址： http://www.yiiyaa.net/1357
【編輯推薦】
