鼠標懸停時的事件代理

創建點擊事件時，我盡我所能將它們綁定一次 - 通常是由所有預期觸發事件的節點共享的父項。然而，我很好奇，mouseover事件的最佳做法是什麼：當鼠標懸停時結果是不斷觸發事件時，將事件綁定到父項是否有意義？什麼是最有效的做法？鼠標懸停時的事件代理

來源

2014-02-13 Luke Whyte

這個答案可能是相關的：http://stackoverflow.com/a/12824698/613004 - 問題將所有事件綁定到文檔，這是不同於我們的問題，但長答案仍然適用的信息。 – Faust

這真的很有幫助。謝謝。 –

爲了提供一些關閉這個問題，我要套用/報價從這個回答一些相關的注意事項：「Should all jquery events be bound to $(document)?」，這是由@Faust上面提到的：

事件代理並不總是使您的代碼更快。除非您綁定到動態元素或大量元素，否則應該將事件處理函數直接綁定到事件發生的對象，因爲這通常會更有效。

更具體地說，這裏是當需要或有利的事件委託時間：

當動態創建要捕獲的事件的對象/刪除，您還是要捕捉他們的事件，而不必明確重新綁定事件處理程序，每次創建新處理程序。
當你有很多對象都想要完全相同的事件處理程序（其中地段至少有數百個）。在這種情況下，在設置時綁定一個委託事件處理程序而不是數百個或更多直接事件處理程序可能更有效。請注意，委託事件處理在運行時總是比直接事件處理程序效率低。
當您嘗試捕獲文檔中任何元素上發生的事件（在文檔的更高級別）時。
當您的設計明確使用事件冒泡和stopPropagation（）來解決頁面中的某些問題或功能時。

原來的答覆由@ jfriend00

來源

2014-02-19 21:30:11

您還可以停止事件的傳播。這裏更多的信息：http://api.jquery.com/event.stoppropagation/這裏event.preventDefault() vs. return false

來源

2014-02-13 12:20:15

所以，我知道這個問題是早就死了，但我想我可能也有辦法做到這一點回答。

使用動態元素，您可以在父div /容器上建立mousemove偵聽器，然後在div中查詢具有：hover屬性的元素。

例如：

<div class="list-container"> 
    <ul class="dynamic-list-content"> 
    <!-- actual list elements provided by js --> 
    </ul> 
</div>

然後：

var listContainer = document.querySelector('.list-container'); 
listContainer.addEventListener('mousemove', function(e) { 
    var hovered = listContainer.querySelector('li:hover'); 
    // do something with the hovered element here. 
});

注意（你提到），這將激發很多，但沒有超過，如果你添加一個mouseMove事件偵聽到個人條目。而且你可以使用數據屬性，獨特的ID等來消除這一點。從我的測試來看，它在Chrome中表現非常好。

來源

2016-01-06 06:16:38 Gopherkhan

鼠標懸停時的事件代理

回答

相關問題