的$（document）。在（ '點擊'， '#ID'，函數（）{}）VS $（ '＃ID'）。在（ '點擊'，函數（）{}）

Question

我試圖找出什麼是

$(document).on('click', '#id', function(){}); 

和

的區別

$('#id').on('click', function(){}); 

我已經無法找到任何信息，如果有任何兩者之間的區別，如果有什麼差異可能是。

能有人請解釋，如果有什麼區別呢？

Answer 1

第一個示例演示事件委託。事件處理程序綁定到DOM樹（在這種情況下爲document）上的一個元素，並在事件到達源自與選擇器匹配的元素的元素時執行。

這是可能的，因爲大多數DOM事件冒泡樹從起點。如果你點擊#id元素，產生點擊事件，將向上冒泡通過所有的祖先元素（邊注：這裏居然是在此之前一個階段，稱爲「捕獲階段」，當事件歸結樹到目標）。您可以在任何這些祖先中捕捉事件。

第二個例子直接結合事件處理程序的元件。這個事件仍然會冒泡（除非你在處理程序中阻止它），但由於處理程序綁定到了目標上，所以你不會看到這個過程的效果。

通過委派的事件處理程序，可以確保它是爲未在DOM在結合時存在的元素執行。如果您的第二個示例後創建了#id元素，則您的處理程序將永遠不會執行。通過在執行時綁定到一個你知道在DOM中的元素，你可以確保你的處理程序實際上會被附加到某個東西上，並且可以在稍後適當的時候執行。

Answer 2

請考慮下面的代碼

<ul id="myTask"> 
    <li>Coding</li> 
    <li>Answering</li> 
    <li>Getting Paid</li> 
</ul> 

現在，這裏有雲的區別

// Remove the myTask item when clicked. 
$('#myTask').children().click(function() { 
    $(this).remove() 
}); 

現在，如果我們再增加一個myTask？

$('#myTask').append('<li>Answer this question on SO</li>'); 

點擊此myTask項目不會從列表中刪除它，因爲它沒有綁定任何事件處理程序。如果相反，我們使用.on，這個新項目就可以在我們沒有任何額外的努力的情況下工作。這裏的。對版本是什麼樣子：

$('#myTask').on('click', 'li', function (event) { 
    $(event.target).remove() 
}); 

摘要：

.on()和.click()之間的差異將是，當與.click()事件相關聯的DOM元素在動態添加.click()可能無法正常工作稍後的時間點，而.on()可用於在以後的時間點動態生成與.on()調用關聯的DOM元素的情況。