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

我试图找出有什么区别

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

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

如果两者之间有任何差异,我还找不到任何信息,如果有的话,可能会有什么不同。

有人可以解释一下,如果有什么不同?

第一个例子演示事件委托 。 事件处理程序绑定到DOM树(本例中为document )上方的元素,并在事件到达源自与select器匹配的元素的元素时执行。

这是可能的,因为大多数DOM事件从起始点冒泡起来。 如果你点击了#id元素,就会产生一个点击事件,这个点击事件将会通过所有的祖先元素( 注意:事实上有一个阶段,叫做“捕获阶段”,当事件沿着树到目标 )。 你可以在任何一个祖先上捕捉事件。

第二个示例将事件处理程序直接绑定到元素。 事件仍然会冒泡(除非你在处理程序中阻止),但是由于处理程序绑定到了目标上,所以你不会看到这个过程的效果。

通过委派一个事件处理程序,可以确保它在绑定时在DOM中不存在的元素执行。 如果你的#id元素是在你的第二个例子之后创build的,那么你的处理器将永远不会执 通过在执行时绑定到一个你知道的元素,你可以确保你的处理程序实际上会被附加到某个东西上,并且可以在以后适当地执行。

考虑下面的代码

 <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().on()之间的区别是.on()可能不起作用,当与.click()事件相关的DOM元素在稍后的时间点被dynamic添加时.on()可以用于与.on()调用相关的DOM元素可能会在稍后dynamic生成。