JavaScript中怎么實現(xiàn)事件委托

JavaScript中怎么實現(xiàn)事件委托，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

事件是對象發(fā)送的消息，以發(fā)信號通知操作的發(fā)生。委托是可保存對方法的引用的類。下面介紹javascript中的事件和委托，供參考。

由于事件處理程序可以為現(xiàn)代Web應用程序提供交互能力，因此許多開發(fā)人員會不分青紅皂白地向頁面中添加大量的處理程序，在創(chuàng)建GUI的語言（如#C）中，為GUI中的每個按鈕添加一個onclick事件處理程序是司空見慣的事，而且這樣做也不會導致什么問題?？墒窃贘avaScript中，添加到頁面上的事件處理程序數(shù)量關系到頁面的整體運行性能。

導致這一問題的原因是多方面的。首頁，每個都是對象，都會占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導致DOM訪問次數(shù)，會延遲整個頁面的交互就緒時間。事實上，從如何利用好事件處理程序的角度出發(fā)，還是有一些方法能夠提升性能的。

對“事件處理程序過多”問題的解決方案是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。例如，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個被單擊后會執(zhí)行操作的列表項。按照傳統(tǒng)的做法是，需要像下面這樣為它們添加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應用程序中，對所有可單擊的元素都采用這種形式，那么結(jié)果就會有數(shù)不清的代碼用于添加事件處理程序。此時，可以利用事件委托技術解決這個問題。使用事件類型，只需在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事件處理程序，由于所有列表項都是這個元素的子節(jié)點，而且它們的事件會冒泡，所以單擊事件最終會被這個函數(shù)處理。我們知道，事件目標是被單擊的列表項，故而可以通過檢測id屬性來決定采用適當?shù)牟僮?。與前面未使用事件委托的代碼比一比，會發(fā)現(xiàn)這段代碼的事前消耗更低，因為只取得了一個DOM元素，只添加了一個事件處理程序。雖然對用戶來說最終的結(jié)果相同。但這種技術需要占用的內(nèi)存更少。所有用到按鈕的事件（多數(shù)鼠標事件和鍵盤事件）都適合采用事件委托技術。

如果可行的話，也可以考慮為document對象添加一個事件處理程序，用以處理頁面上發(fā)生的某種特定類型的事件。這樣做與采取傳統(tǒng)的做法相比具有如下優(yōu)點：

1、document對象很快就可以訪問，而且可以在頁面生命周期的任何時點上為它添加事件處理程序（無需等待DOMContentLoaded或load事件）。換句話說，只要可單擊的元素呈現(xiàn)在頁面上，就可以立即具備適當?shù)墓δ堋?/p>

2、在頁面中設置事件處理程序所需的時間更少。只添加一個事件處理程序所需的DOM引用更少，所花的時間也更少。

3、整個頁面占用的內(nèi)存空間更少，能夠提升整體性能。

最適合采用事件委托技術的事件包括click,mousedown,mouseup,keydown,keyup和keypress,雖然mouseover和mouseout事件也冒泡，但要適當處理它們并不容易，而且經(jīng)常需要計算元素的位置（因為當鼠標從一個元素移到其他子節(jié)點時，或者當鼠標移出該元素時，都會觸發(fā)mouseout事件）。

關于JavaScript中怎么實現(xiàn)事件委托問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業(yè)資訊頻道了解更多相關知識。