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

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,新项目将无需任何额外的努力.以下是.on版本的外观:

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

摘要:

之间的差.on()和.click()将是.click()当与相关联的DOM元素可能不起作用.click()事件是在稍后的点,而动态添加.on()可以在与相关联的DOM元素的情况下使用.on()呼叫可在稍后的点动态生成的.