.bind()

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

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

如果 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 开始，我们不能再向 object、embed 或 applet 元素附加数据（因此，也不能附加事件），因为向 Java applet 附加数据时会发生严重错误。

注意： 尽管将在下一个示例中演示，但最好不要为同一元素绑定 click 和 dblclick 事件的处理程序。事件触发的顺序因浏览器而异，有些在 dblclick 之前接收两个 click 事件，而有些只接收一个。双击的敏感度（被检测为双击的点击之间的最大时间）可能因操作系统和浏览器而异，并且通常可以由用户配置。