談JavaScript中的事件委托
事件是對象發送的消息，以發信號通知操作的發生。委托是可保存對方法的引用的類。下面介紹javascript中的事件和委托，供參考。
由于事件處理程序可以為現代Web應用程序提供交互能力，因此許多開發人員會不分青紅皂白地向頁面中添加大量的處理程序，在創建GUI的語言（如#C）中，為GUI中的每個按鈕添加一個onclick事件處理程序是司空見慣的事，而且這樣做也不會導致什么問題。可是在JavaScript中，添加到頁面上的事件處理程序數量關系到頁面的整體運行性能。
導致這一問題的原因是多方面的。首頁，每個都是對象，都會占用內存；內存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導致DOM訪問次數，會延遲整個頁面的交互就緒時間。事實上，從如何利用好事件處理程序的角度出發，還是有一些方法能夠提升性能的。
對“事件處理程序過多”問題的解決方案是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，click事件會一直冒泡到document層次。也就是說，我們可以為整個頁面指定一個onclick事件處理程序，而不必給每個可單擊的元素分別添加事件處理程序。以下面的HTML代碼為例：
- <ul id="myLinks">
- <li id="goSomewhere">Go somewhere</li>
- <li id="doSomething">Go somewhere</li>
- <li id="sayHi">Say hi</li>
- </ul>
其中包含3個被單擊后會執行操作的列表項。按照傳統的做法是，需要像下面這樣為它們添加3個事件處理程序：
- 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");
- });
如果在一個復雜的Web應用程序中，對所有可單擊的元素都采用這種形式，那么結果就會有數不清的代碼用于添加事件處理程序。此時，可以利用事件委托技術解決這個問題。使用事件類型，只需在DOM樹中盡量***的層次上添加一個事件處理程序，如下面的例子所示：
- 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>元素添加了一個onclick事件處理程序，由于所有列表項都是這個元素的子節點，而且它們的事件會冒泡，所以單擊事件最終會被這個函數處理。我們知道，事件目標是被單擊的列表項，故而可以通過檢測id屬性來決定采用適當的操作。與前面未使用事件委托的代碼比一比，會發現這段代碼的事前消耗更低，因為只取得了一個DOM元素，只添加了一個事件處理程序。雖然對用戶來說最終的結果相同。但這種技術需要占用的內存更少。所有用到按鈕的事件（多數鼠標事件和鍵盤事件）都適合采用事件委托技術。
如果可行的話，也可以考慮為document對象添加一個事件處理程序，用以處理頁面上發生的某種特定類型的事件。這樣做與采取傳統的做法相比具有如下優點：
1、document對象很快就可以訪問，而且可以在頁面生命周期的任何時點上為它添加事件處理程序（無需等待DOMContentLoaded或load事件）。換句話說，只要可單擊的元素呈現在頁面上，就可以立即具備適當的功能。
2、在頁面中設置事件處理程序所需的時間更少。只添加一個事件處理程序所需的DOM引用更少，所花的時間也更少。
3、整個頁面占用的內存空間更少，能夠提升整體性能。
最適合采用事件委托技術的事件包括click,mousedown,mouseup,keydown,keyup和keypress,雖然mouseover和mouseout事件也冒泡，但要適當處理它們并不容易，而且經常需要計算元素的位置（因為當鼠標從一個元素移到其他子節點時，或者當鼠標移出該元素時，都會觸發mouseout事件）。
本文地址： http://www.yiiyaa.net/1357
【編輯推薦】
