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

时间:2012-05-30 08:42:18

标签: javascript jquery

  

可能重复:
  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()中包装事件呢?

感谢。

4 个答案:

答案 0 :(得分:5)

为什么要在.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()...)

的简写方法

答案 1 :(得分:4)

主要是.click().on()

之间的区别

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

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

答案 2 :(得分:2)

.on为您提供:

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

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

答案 3 :(得分:2)

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

使用.click的唯一好处是:

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