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

Why use .on() for adding event instead of directly adding event?

本文关键字：事件 添加 on 为什么      更新时间：2023-09-26

可能的重复项：
jquery on vs Click 方法

从 API：

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

示例代码：

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

我们可以写这样的东西： 

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

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

谢谢。

为什么要费心将事件包装在 .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()...)的速记方法

主要是.click()和.on()之间的区别

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

因此，使用.on()使您能够将新添加的 ellement 上的点击事件绑定到页面

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

使用 .click 的唯一优点是：

  • 写起来更短
  • 它会在错误键入时引发运行时错误，而不是静默失败

.on给你：

  1. 事件委派
  2. 能够为多个事件注册同一处理程序
  3. 事件名称间距
  4. 一致的事件注册界面
  5. 与其他 JS 环境（如 node.js）的一致性

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

相关文章：