为什么使用.on（）添加事件而不是直接添加事件？

Question

  

可能重复：
  jquery on vs click methods

来自API：

.on（）：将一个或多个事件的事件处理函数附加到所选元素。

示例代码：

$("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
});

我们可以写下这样的内容：

$("#dataTable tbody tr").click(function() {
        alert($this).text();
});

为什么要在.on（）中包装事件呢？

感谢。

Answer 1

为什么要在.on（）中包装事件？

在这个具体示例中，使用on()可以获得event delegation的好处，因此您可以轻松地为每个tr元素附加大量处理程序

$("#dataTable").on("click", "tr", function(event){
    alert($(this).text());
});

此外，使用on()您可以为您的活动分配namespace，例如

$("#dataTable").on("click.mynamespace"...)

所以你可以稍后以更清洁，更精致的方式分离你的事件，例如

$("#dataTable").off(".mynamespace"...);

而click(function()...)只是.on("click", function()...)

的简写方法

Answer 2

主要是.click()和.on()

之间的区别

使用.click()，您可以在页面上的现有元素上绑定click事件但是，例如，刚刚由Ajax添加的新元素如何，click事件将不会绑定到新元素上

因此，使用.on()可以将新添加的元素上的click事件绑定到页面

Answer 3

.on为您提供：

1. 事件委托
2. 为多个事件注册相同处理程序的能力
3. 事件命名空间
4. 一致的事件注册界面
5. 与node.js
等其他JS环境的一致性

我总是优先使用.on() .click()，以便在我想触发事件时保留后者。

Answer 4

反过来说：.click()是.on('click')的简写。不将它包装在.click中会更快（并允许进一步的选项，如事件委托）。

使用.click的唯一好处是：

• 写的时间更短
• 它会在错误输入时抛出运行时错误，而不是默默地失败