JavaScript中怎么實現事件委托

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事件）。

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