.bind()

从 jQuery 3.0 开始，.bind() 已被弃用。它已被 .on() 方法取代，用于从 jQuery 1.7 开始将事件处理程序附加到文档，因此其使用已被弃用。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素在调用 .bind() 时必须存在。有关更灵活的事件绑定，请参阅 .on() 中的事件委托讨论。

任何字符串对于 eventType 都是合法的；如果字符串不是本机 DOM 事件的名称，则处理程序将绑定到自定义事件。这些事件永远不会由浏览器调用，但可以使用 .trigger() 或 .triggerHandler() 从其他 JavaScript 代码手动触发。

如果 eventType 字符串包含一个句点 (.) 字符，则该事件是命名空间的。句点字符将事件与其命名空间分开。例如，在调用 .bind( "click.name", handler ) 中，字符串 click 是事件类型，字符串 name 是命名空间。命名空间允许我们取消绑定或触发特定类型的某些事件，而不会影响其他事件。有关更多信息，请参阅 .unbind() 的讨论。

某些事件有专门的页面，描述其使用的细节。有关这些事件的完整列表，请参阅 事件类别。

当事件到达元素时，将触发绑定到该元素的该事件类型的所有处理程序。如果注册了多个处理程序，它们将始终按绑定的顺序执行。在所有处理程序执行完毕后，事件将继续沿着正常的事件传播路径进行。

.bind() 的基本用法是

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

此代码将使 ID 为 foo 的元素响应 click 事件。此后，当用户在该元素内单击时，将显示警报。

多个事件

可以通过在每个事件类型之间用空格隔开的方式，一次绑定多个事件类型

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

这对于 <div id="foo"> 的影响（当它最初没有 "entered" 类时）是在鼠标进入 <div> 时添加 "entered" 类，并在鼠标离开时删除该类。

从 jQuery 1.4 开始，我们可以通过传递事件类型/处理程序对的 对象 来同时绑定多个事件处理程序。

$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});

事件处理程序

handler 参数接受一个回调函数，如上所示。在处理程序中，关键字 this 指向绑定处理程序的 DOM 元素。要使用 jQuery 中的元素，可以将其传递给正常的 $() 函数。例如

$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});

执行此代码后，当用户点击 ID 为 foo 的元素时，其文本内容将以警报的形式显示。

从 jQuery 1.4.2 开始，可以将重复的事件处理程序绑定到元素，而不是将其丢弃。当使用事件数据功能或其他唯一数据驻留在事件处理程序函数周围的闭包中时，这很有用。

在 jQuery 1.4.3 中，您现在可以传递 false 来代替事件处理程序。这将绑定一个等效于以下事件处理程序：function(){ return false; }。此函数可以在稍后通过调用 .unbind( eventName, false ) 来删除。

事件对象

handler 回调函数也可以接受参数。当函数被调用时，事件对象将被传递给第一个参数。

事件对象通常是不必要的，并且参数被省略，因为当处理程序被绑定时，通常有足够的上下文来确切地知道当处理程序被触发时需要做什么。但是，有时有必要在事件启动时收集有关用户环境的更多信息。 查看完整的事件对象.

从处理程序中返回 false 等效于在事件对象上调用 .preventDefault() 和 .stopPropagation()。

在处理程序中使用事件对象如下所示

$( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});

注意添加到匿名函数的参数。此代码将导致对 ID 为 foo 的元素的点击报告点击时鼠标光标的页面坐标。

传递事件数据

可选的 eventData 参数并不常用。提供时，此参数允许我们将其他信息传递给处理程序。此参数的一个方便用途是解决由闭包引起的问题。例如，假设我们有两个事件处理程序，它们都引用同一个外部变量

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
  alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
  alert( message );
});

因为处理程序是闭包，它们都在其环境中具有 message，所以当触发时，两者都将显示消息 Not in the face!。变量的值已更改。为了避免这种情况，我们可以使用 eventData 传递消息

var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});

这次，变量不会在处理程序中直接引用；相反，变量是通过 `eventData` 以**值传递**的方式传递的，这会将事件绑定时的值固定下来。第一个处理程序现在将显示 Spoon!，而第二个处理程序将提醒 Not in the face!

如果存在 `eventData`，它将是 `bind()` 方法的第二个参数；如果不需要向处理程序发送任何额外数据，则回调将作为第二个也是最后一个参数传递。

从 jQuery 1.4 开始，我们不再能够将数据（以及事件）附加到对象、嵌入或 applet 元素，因为在将数据附加到 Java applet 时会发生严重错误。

注意：虽然在下一个示例中进行了演示，但建议不要将处理程序绑定到同一个元素的 `click` 和 `dblclick` 事件。触发的事件顺序因浏览器而异，有些浏览器在 `dblclick` 之前会收到两次点击事件，而另一些浏览器只收到一次。双击敏感度（检测为双击的两次点击之间允许的最大时间）会因操作系统和浏览器而异，并且通常是用户可配置的。