的$（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元素的情况。