jQuery .on()与将事件绑定到选择器？

Question

我正在查看此页面上的文档.他们有这样的例子......

$("p").on("click", function(){
alert( $(this).text() );
});

$("form").on("submit", false)

$("form").on("submit", function(event) {
  event.preventDefault();
});

为什么这样更好或者它与此有何不同......

$("p").click(function(){
alert( $(this).text() );
});

$("form").submit(false);

$("form").submit(function(event) {
  event.preventDefault();
});

作为最后一个问题,你为什么要这样做......

$("form").on("submit", function(event) {
  event.stopPropagation();
});

代替 ...

  $("form").submit(function(event) {
      event.preventDefault();
  });

Answer 1

jQuery .bind()vs .live()vs .delegate()vs .on()之间的差异

本文最大的收获是......

使用.bind()方法非常昂贵,因为它将相同的事件处理程序附加到选择器中匹配的每个项目.

您应该停止使用.live()方法,因为它已被弃用并且存在很多问题.

在处理性能和对动态添加的元素做出反应时,.delegate()方法给了很多"砰的一声".

新的.on()方法主要是语法糖,它可以模仿.bind(),.live()或.delegate(),具体取决于你如何调用它.

新的方向是使用新的.on方法.熟悉语法并开始在所有jQuery 1.7+项目中使用它.

Answer 2

有当使用一些分歧.on,而不是特定的处理程序,如.click等

1. 目的.on()方法是提供以一种语法附加事件处理程序所需的所有功能.您可以编写使用一致的语法.on,而不是一堆混合.on,.submit或.click.
2. .on支持事件委托,但特定处理程序(例如.click)不支持.阅读更多第直接和委托的事件从这里
3. 使用.on你可以绑定多个事件处理程序.on('click dblclick')
4. 使用.on可以绑定名称空间事件.on('click.myClick').阅读第多个事件名称和命名空间从这里
5. 在内部.click触发,.on所以基本上你避免额外的函数调用.- .click源代码

而现在的判决,

$("form").on("submit",function(event){event.preventDefault();});

为什么这样更好或者它与此有何不同

$("form").submit(function(event){event.preventDefault();});

$("form").on( 因为上述原因1和5更好