試圖了解事件之間的jQuery的區別

Question

我了解有幾種方法可以綁定到jquery中的事件，我擔心的是這兩種方法。

這是我的理論標記：

<div id="closerToTheButton">
     <button id="someID"></button>    
</div>

以及可能的js選項：

$(document).on('click', '#someID', function(){
   // do work
});

和：

$('#closerToTheButton').on('click', '#someID', function(){
       // do work
});

我了解如果存在ID以外的選擇器，它們之間的區別，但是ID的確有區別嗎？ 有性能提升嗎？ 哪一個是首選？

Answer 1

是的，第二個選項對性能更好，因為該事件綁定到#closerToTheButton元素而不是整個文檔，因此僅單擊#someID元素內的#closerToTheButton元素將觸發該功能。 （這也是在功能上略有區別-如果#someID不是的后代#closerToTheButton ，點擊它不會閃光功能。）

Answer 2

區別在於將click事件應用於文檔，如果在創建DOM之后運行此代碼，則始終會捕獲該事件。 現在應用事件對象# closerToTheButton ，只有當您在執行代碼時該元素存在於DOM中時，才會捕獲該對象。 如果已在運行代碼后動態創建了該事件，則不會捕獲click事件。

在性能方面，如果您不是動態創建元素，則第二個選項比第一個更好，因為不必在整個DOM中搜索元素# someID 。

Answer 3

出於性能方面的考慮，您應始終綁定到最接近的靜態祖先 ，這些祖先覆蓋了要將委托事件處理程序附加到的所有元素。