Jquery On事件。 代表和速度問題

Question

我在我的代碼中使用了一些事件，例如：

$( "body" ).on( "click", '.editButton', clickFunction);

它為Body內部具有類.editButton的每個元素創建事件。 我將此事件添加到Body元素，因為我不知道我在哪里可以在代碼中使用此按鈕，有時我正在對網站的不同部分做很多ajax請求，我希望它們都能觸發clickFunction。 這種方法對一般頁面速度有什么影響？ 如果我有5-6個這樣的委托事件怎么辦？ 我不確定它是如何工作的。 如果我通過Ajax調用添加一些新的html元素，那么腳本會搜索.editButton元素的每個Body元素並為它創建click事件嗎？ 當我幾乎沒有這樣的事件時，它會像那幾次一樣完成嗎？ 它有多快？ 這是我們必須關注的事情嗎？

Answer 1

如果我通過Ajax調用添加一些新的html元素，那么腳本會搜索.editButton元素的每個Body元素並為它創建click事件嗎？

嗯，這不是JavaScript中的事件委派的工作原理。 您只將事件處理程序附加到父節點一次。 在你的情況下body標簽。

現在，當任何節點上的任何事件發生時，事件都會向上傳播到DOM樹。 （事件冒泡）。 一旦它命中了事件處理程序，就會檢查處理程序的目標並使用它執行回調函數。

在您的情況下，無論何時單擊編輯按鈕（或單擊任何按鈕），事件都會向上移動到您擁有click處理程序的正文。 它看到目標是.editButton ，JS知道這是你的處理程序的目標。

正如您所看到的，當您的dom樹太深時，性能降低的唯一方法就是降級。 這就是為什么將事件處理程序添加到公共父級並始終添加到某些使用的body或文檔的良好實踐。

因此添加更多此類按鈕不會導致性能問題的任何增加。