jQuery on() 语法的差异

Question

从性能的角度来看，这两种语法之间有什么区别吗？或者我使用哪一种都没有关系？

$(document).on('click', '#button', function () {
//some code
});

和

$('#button').on('click', function () {
//some code
});

Answer 1

是的，性能有差异，功能也有差异。

第一种方式（委托事件）将在文档元素上绑定一个事件，该事件将捕获任何冒泡到它的点击，并检查目标元素是否与选择器匹配#button。

第二种方式（直接事件）将在每个匹配选择器的元素上绑定一个事件 #button。

（在选择器 #button 的特定情况下，当然不会超过一个元素。）

如果您稍后添加与选择器匹配的元素，以及当您希望为这些元素处理事件而无需再次绑定时，则主要使用委托事件。

您在使用委托事件时应该多加小心。由于该事件将捕获范围内发生的每次点击并每次都评估选择器，因此每次点击都会产生一些开销。如果您以这种方式绑定多个事件，则会有一堆选择器需要在每次点击时进行评估。