2013-10-27 18 views
0

我用我的代碼中一些事件,如:Jquery On事件。代表和速度問題

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

,它創造了體內的每一個元素有類.editButton事件。 我這個事件添加到主體元素,因爲我不知道我在哪裏可以有這個按鈕的代碼,有時我做很多Ajax請求到站點的不同部分,我想他們都火clickFunction。 此方法對一般頁面速度有什麼影響?如果我有5-6個這樣的代表事件怎麼辦?我不確定它是如何工作的。如果我通過Ajax調用增加一些新的HTML元素的網頁確實腳本搜索.editButton元將Body元素,併爲它創建click事件?而當我幾乎沒有這樣的事件時,它會像這樣幾次完成?它有多快?這是我們必須關心的嗎?

回答

2

如果我添加通過Ajax調用一些新的HTML元素的網頁做的 腳本搜索.editButton元將Body元素,併爲它創建 click事件?

那麼,這是不是很事件代表團在JavaScript中是如何工作的。您只將事件處理程序附加到父節點一次。在你的情況下,body標籤。

現在,當任何情況下,任何地點,在任何節點發生時,事件傳播了DOM樹。 (事件冒泡)。一旦它遇到事件處理程序,就會檢查處理程序的目標,並使用它執行回調函數。

在你的情況下,無論何時點擊編輯按鈕(或點擊任何按鈕),事件都會向上移動到你的身體,在那裏你有一個click處理程序。它看到目標是.editButton,JS知道這是你的處理程序的目標。

正如你所看到的,你的表現會降低的唯一方法是當你有一個DOM樹太深。這就是爲什麼它是一個很好的初步實踐給事件處理程序添加到一個共同的父始終把一些使用body或文檔。

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