6

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

$("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();
  });
4

4 回答 4

7

jQuery .bind() 与 .live() 与 .delegate() 与 .on() 的区别

这篇文章最大的收获是……

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

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

.delegate() 方法在处理性能和对动态添加的元素做出反应时提供了很多“物有所值”。

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

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

于 2012-05-31T15:36:22.803 回答
5

使用.on而不是特定的处理程序（例如.click等）时几乎没有区别

  1. 目的.on()方法是提供以一种语法附加事件处理程序所需的所有功能。.on您可以使用而不是 mix of bundle.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更好

于 2012-05-31T15:40:35.843 回答
3

, click, submitetc 方法只是它们各自on和trigger等价物的便捷方法。

如果我相信它们可以提高代码的可读性，我只会使用它们。但总的来说，我发现onandtrigger方法更清楚地表达了代码的意图。

于 2012-05-31T15:37:01.533 回答
2
  1. 使用$.on(), 即使您不使用委托也很好，因为它在您的代码中引入了熟悉且一致的语法。
  2. 此外，它在 jQuery 源代码中大量使用，这意味着您可以在调用$.bind().
  3. 使用$.submit()或$.click()分配处理程序令人困惑，因为它也用于触发这些事件。

然后是事件委托的额外好处，当您只需要添加一个元素时，它可以让您免于向数百个元素添加事件。假设您有 100 个<td>元素，并且您想在点击时提醒它们的内容。你可以这样做：

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

但是现在您已经添加了 100 个新的事件处理程序。对性能真的很不利。使用$.on()，您可以仅绑定到<table>，并检查所有事件以查看引发它们的原因。如果是<td>，您可以做出相应的回应：

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

瞧，只绑定了一个事件，应用程序中只引入了一个事件处理程序。性能大幅提升。

$.on()这是王牌$.click()或$.submit()任何一天的最大原因之一。

于 2012-05-31T15:36:43.223 回答