JQuery“ click”、“ bind”、“ live”、“ committee”、“ touch”和“ on”函数之间的区别(举例) ？

在你读这个之前，把这个事件列表拉到另一个页面，API 本身非常有帮助，我在下面讨论的所有内容都是直接从这个页面链接的。

首先，.click(function)实际上是 .bind('click', function)的一个快捷方式，它们是等价的。在绑定处理程序 直接到元素时使用它们，如下所示:

$(document).click(function() {
alert("You clicked somewhere in the page, it bubbled to document");
});

如果这个元素被替换或丢弃，这个处理程序将不再存在。此外，没有 在这段代码运行的时候附加处理程序的元素(例如，选择器当时找到了它)也不会得到处理程序。

.live() 和 .delegate()同样相关，.delegate()实际上在内部使用 .live()，它们都监听事件的泡沫。这适用于新元素和旧元素，它们以同样的方式产生泡沫事件。当您的元素可能发生变化时，例如添加新行、列表项等，您可以使用它们。如果您没有一个父/共同的祖先将留在页面中，并且在任何时候都不会被替换，那么使用 .live()，如下所示:

$(".clickAlert").live('click', function() {
alert("A click happened");
});

然而，如果你有一个父元素没有被替换(因此它的事件处理程序不会再见) ，你应该用 .delegate()来处理它，像这样:

$("#commonParent").delegate('.clickAlert', 'click', function() {
alert("A click happened, it was captured at #commonParent and this alert ran");
});

这与 .live()的工作原理几乎相同，但是在捕获和执行处理程序之前，事件冒泡的次数更少。这两种方法的另一个常见用法是，你的类在一个元素上改变了，不再匹配你最初使用的选择器... 使用这些方法，选择器被计算为 在事件发生的时候，如果它匹配，处理程序就会运行... 所以元素不再匹配选择器，它就不会再执行了。然而，对于 .click()，事件处理程序被绑定在 DOM 元素上，事实上它不匹配任何用来找到它的选择器是不相关的... 事件被绑定并且一直保持，直到该元素消失，或者处理程序通过 .unbind()被删除。

.live()和 .delegate()的另一个常见用途是 表演。如果处理的是元素的 很多，那么直接将单击处理程序附加到每个元素既昂贵又费时。在这些情况下，设置一个 单身处理程序并让冒泡完成工作(看看这个问题，它在哪里产生了巨大的差异)更为经济，这是应用程序的一个很好的例子。

触发 -用于更新的问题

有两个主要的事件处理程序触发函数可用，它们与 API 中的“事件处理程序附件”属于同一类别，这些是 .trigger()和 .triggerHandler()。.trigger('eventName')内置了一些常见事件的快捷方式，例如:

$().click(fn); //binds an event handler to the click event
$().click();   //fires all click event handlers for this element, in order bound

您可以在这里查看包含这些快捷方式的清单 。

至于差异，.trigger()触发事件处理程序(但大多数情况下不是默认操作，例如在单击的 <textarea>中将光标放在正确的位置)。它使事件处理程序按照它们被绑定的顺序出现(就像本机事件一样) ，触发本机事件操作，并向 DOM 冒泡。

.triggerHandler() 通常用于不同的目的，这里您只是试图触发绑定处理程序，它不会导致本机事件触发，例如提交表单。它不会冒出 DOM，也不可链接(它返回该事件的最后绑定事件处理程序返回的任何内容)。例如，如果你想触发一个 focus事件，但不是真正聚焦对象，你只需要运行与 .focus(fn)绑定的代码，这会做到这一点，而 .trigger()会做到这一点，以及实际聚焦元素和气泡。

下面是一个现实生活中的例子:

$("form").submit(); //actually calling `.trigger('submit');`

这将运行任何提交处理程序，例如 JQuery 验证插件，然后尝试提交 <form>。然而，如果您想验证 只是，因为它是通过一个 submit事件处理程序连接的，但事后不提交 <form>，您可以使用 .triggerHandler('submit')，如下所示:

$("form").triggerHandler('submit');

如果验证检查没有通过，这个插件会阻止处理程序提交表单，但是对于这个方法，我们并不关心它做了什么。无论它是否中止，我们不是 努力提交表单，我们只是想触发它重新验证，什么也不做。(免责声明:这是一个多余的例子，因为插件中有一个 .validate()方法，但它是一个很好的意图说明)

前两个是等价的。

// The following two statements do the same thing:
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } );

不过，第二种方法可以通过指定几个空格分隔的事件名称来同时绑定到多个事件:

$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } );

.live方法更有趣:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>


<script>
$("a.myLink").click( function() { alert( 'Click!' ); } );


$("a#another").addClass( "myLink" );
</script>

在脚本的第二行执行之后，第二个链接也将有一个 CSS 类“ myLink”。但是它没有事件处理程序，因为在附加事件时它没有类。

现在，考虑一下您希望它是反过来的: 每次带有类“ myLink”的链接出现在页面的某个地方时，您都希望它具有相同的事件处理程序。当您有某种类型的列表或表时，这种情况很常见，您可以动态地添加行或单元格，但希望它们的行为方式相同。不必每次都重新分配事件处理程序，您可以使用 .live方法:

<a class="myLink">A link!</a>
<a id="another">Another link!</a>


<script>
$("a.myLink").live( "click", function() { alert( 'Click!' ); } );


$("a#another").addClass( "myLink" );
</script>

在这个示例中，第二个链接一旦获得“ myLink”类，也将获得事件处理程序。魔法！:-)

当然，没那么直白。.live实际上所做的不是将处理程序附加到指定的元素本身，而是附加到 HTML 树的根(“ body”元素)。DHTML 中的事件具有这种有趣的“冒泡”特性。想想这个:

<div> <a> <b>text</b> </a> </div>

如果单击“ text”，那么首先 < b > 元素将得到一个“ click”事件。之后，< a > 元素将获得一个“ click”事件。然后 < div > 元素会得到一个“ click”事件。等等-一直到 < body > 元素。这就是 jQuery 将捕获事件的地方，并查看是否有任何“活动”处理程序应用于最初导致事件的元素。太棒了！

最后是 .delegate方法。它只是获取符合给定选择器的元素的所有子元素，并将“ live”处理程序附加到它们。看看吧:

$("table").delegate( "td", "click", function() { alert( "Click!" ); } );


// Is equivalent to:
$("table").each( function() {
$(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );

有问题吗？

这就是阅读 API 可能有所帮助的地方。但是，我马上就知道了，所以你可以继续偷懒(耶!) .

$('#something').click(fn);
$('#something').bind('click',fn);

这里没有区别(据我所知)。 .click只是 .bind('click'的一个方便/帮助方法

// even after this is called, all <a>s in
// <div class="dynamic_els"> will continue
// to be assigned these event handlers


$('div.dynamic_els a').live(‘click’,fn);

这是非常不同的，因为 .live将事件添加到您传入的选择器(这里没有) ，并在插入/删除节点时继续查看 DOM

$('#some_element').delegate('td','click',fn);

这种不同只是因为您分配事件处理程序的方式不同。.delegate以 DOM 事件冒泡为中心。基本原则是，每个事件都通过 DOM 树向上冒泡，直到它到达根元素(document或 window或 <html>或 <body>，我记不太清楚了)。

无论哪种方式，您都将 onclick处理程序绑定到 $('#some_element')中的所有 <td>(您必须指定一个选择器，尽管您可以说是 $(document))。当单击其中一个子级时，事件将冒泡显示到 <td>。然后您可以提取事件的源元素(jQuery 会自动为您提取)。

当有成吨的元素并且您只有几个(或者一个中心)点可以通过这些事件时，这是非常有用的。这样可以节省浏览器的工作量和内存，从而将这些事件处理程序合并为更少的对象。

$().click(fn)和 $().bind('click', fn)乍一看是一样的，但 $.bind版本更强大有两个原因:

1. $().bind()允许您为多个事件分配一个处理程序，例如 $().bind('click keyup', fn)。
2. $().bind()支持带名称空间的事件——如果您想删除(解除绑定)某个元素绑定到的特定事件处理程序，这是一个强大的特性——在 命名空间事件中读取更多。

现场对委托: 这已经在其他回复中得到了回答。

在 jQuery 1.7中,。Live ()方法已被废弃。如果您使用的是 jQuery 版本 < 1.7，那么官方建议您使用。授权()。现场直播。

. live ()现在已被. on ()取代。

最好直接访问 jQuery 站点以获取更多信息，但以下是。()方法:

.on( events [, selector] [, data], handler(eventObject) )
.on( events-map [, selector] [, data] )

Http://api.jquery.com/on/