的$(document)。在( '点击', '#ID',函数(){})VS $( '#ID')。在( '点击',函数(){})
我试图找出什么是
$(document).on('click', '#id', function(){});
和
的区别$('#id').on('click', function(){});
我已经无法找到任何信息,如果有任何两者之间的区别,如果有什么差异可能是。
能有人请解释,如果有什么区别呢?
第一个示例演示事件委托。事件处理程序绑定到DOM树(在这种情况下为document
)上的一个元素,并在事件到达源自与选择器匹配的元素的元素时执行。
这是可能的,因为大多数DOM事件冒泡树从起点。如果你点击#id
元素,产生点击事件,将向上冒泡通过所有的祖先元素(边注:这里居然是在此之前一个阶段,称为“捕获阶段”,当事件归结树到目标)。您可以在任何这些祖先中捕捉事件。
第二个例子直接结合事件处理程序的元件。这个事件仍然会冒泡(除非你在处理程序中阻止它),但由于处理程序绑定到了目标上,所以你不会看到这个过程的效果。
通过委派的事件处理程序,可以确保它是为未在DOM在结合时存在的元素执行。如果您的第二个示例后创建了#id
元素,则您的处理程序将永远不会执行。通过在执行时绑定到一个你知道在DOM中的元素,你可以确保你的处理程序实际上会被附加到某个东西上,并且可以在稍后适当的时候执行。
我想知道哪一个委托事件更快。我想提高我的jQuery代码的质量。由于DOM中的委托事件比从#Element委派事件花费的时间少。请分享您的想法 – 2014-08-30 09:41:30
@James Allardice - 使用后一种方法,'$(document).on('click',$('#id'),function()...'我怎样才能使用'$(this) '引用'$('#id')'''$(this)'当前引用'document' - 我明白。 – cheshireoctopus 2014-09-17 22:24:18
请考虑下面的代码
<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元素的情况。
Bhushan,有没有任何理由使用前者而不是后者? – 2016-01-08 22:09:34
@SzilardMagyar I猜我已经回答了我在答案的摘要部分.. – 2016-01-10 03:48:25
好信息! – 2017-04-08 08:08:34
您是否阅读过文档或在本网站上进行搜索?应该有几百万个答案可供选择? – adeneo 2013-02-14 16:16:16
在[本节](http://api.jquery.com/on/#direct-and-delegated-events)中的“.on()'的API文档中阅读关于事件委托的内容 – 2013-02-14 16:17:53
得到“点饥饿”的河马回答这个问题,尽管它有明确的记录。第一个代码说“当文档被点击时,如果它是#id的ID然后触发这个代码”。第二种说法是:“当点击ID号的当前存在的任何内容时,触发此代码”。第一个是将事件分配给当时不存在的元素,但将来会做。第二个不会因后来添加的元素而触发。 – Archer 2013-02-14 16:18:11