从 jQuery 1.7 开始， .on() 方法是为文档添加事件的首选方法。在早先的版本中，.bind() 方法用作直接为元素添加事件。事件处理被添加到 jQuery 对象中当前被选中的元素上，这也要求在进行 .bind() 时，这些元素必须存在。了解更多灵活的事件绑定，请参阅事件代理 .on() 或 .delegate() 中的讨论 。

对于 eventType 而言，任何字符串都是合法的。如果该字符串不是原生的 DOM 事件，那么，该事件处理会被绑定到自定义事件中，而这些事件永远不会被浏览器调用，但是可以通过其它的 JavaScript，例如 .trigger() 或 .triggerHandler() 来手动触发。

如果 eventType 字符串中包含句点(.)字符，那么说明这个事件是带命名空间的。句点字符将事件及其命名空间分隔开来。例如，在调用 .bind('click.name', handler) 时，字符串 click 代表了事件，字符串 name 就是它的命名空间。命名空间允许我们解除绑定或触发某种类型上的事件而不影响其它类型的事件。请参阅在 .unbind() 中讨论的内容，了解更多信息。

对于某些标准浏览器的事件，还可以使用简写的形式，例如 .click() ，可以用于添加或触发事件。关于完整的简写事件列表，可以参阅 事件分类。

当一个事件到达一个元素上时，该元素上绑定的所有与之相对应的类型的事件都会被触发。如果在该元素上注册了多个相同类型的事件，那么它们的执行顺序和它们绑定时的顺序是一致的。在所有的事件执行完之后，事件会继续沿着正常的事件传播路径继续传播事件。

.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" 样式) 时，为其添加 "entered" 样式，当鼠标离开 <div> 时，移除该样式。

从 jQuery 1.4 开始，我们可以通过一个 事件类型/事件处理 的键值对映射，同时为元素添加多个事件处理，例如：

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

事件处理

handler 参数是一个回调函数，就像上面例子中看到的那样。在 handler 中，关键字 this 指向当前所处理的 DOM 元素。若要以 jQuery 对象的方式来使用该元素，可以将该元素传给 $() 函数。例如：

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

当执行完上述代码之后，如果用户在 ID 为 foo 的元素内点击了鼠标，那么就会显示出该元素的内容。

从 jQuery 1.4.2 开始，可以为元素绑定重复的事件处理，而不会丢弃重复的事件。这对于使用 event data 功能时，或者是当其它唯一的数据保存在事件处理函数的闭包中时，特别有用。

在 jQuery 1.4.3 中，你可以将 handler 设置成 false。这相当于绑定了如下事件：function(){ return false; }。之后，您可以通过调用: .unbind( eventName, false ) 来移除该函数。

Event 对象

handler 回调函数还可以带有参数。当调用该函数时，event 对象就是它的第一个参数。

通常是不需要 event 对象的，而且该参数通常被忽略，这是因为当触发事件处理时，我们可以通过上下文来取得足够的信息，完成我们需要的操作。然而，有的时候，当事件初始化完成时，我们需要收集更多关于用户环境的信息时，我们就需要使用该参数了。查看全部 Event 对象。

当事件处理返回 false 时，等价于同时在 event 对象上调用了 .preventDefault() 和 .stopPropagation()。

可以下面这样，在事件处理中使用 event 对象：

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

请注意，event 参数传给了一个匿名函数。上述代码的执行结果是，当用户在 ID 为 foo 的元素内点击了鼠标后，会显示出点击鼠标时的坐标。

传入 Event Data

通常并不使用可选的 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 来传递 message：

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() 方法的第二个参数。如果不需要向事件处理函数中传入额外的数据，那么回调函数将作为第二个也是最终参数。

参阅 .trigger() 方法来了解如何在事件发生时向事件处理函数中传入参数，而不是在事件绑定的时候传递数据。

从 jQuery 1.4 开始，我们不再向 object，embed 或 applet 元素中附加数据(和事件)了，这是因为向 Java applet 附加数据时，会发生致命错误时。

注意： 尽管下面的例子演示了在同一个元素上同时绑定 click 和 dblclick 事件，但是我们不建议这样做。在不同的浏览器中，事件的触发顺序是不一样的。有些浏览器在接收到 dblclick 事件之前，会先接收两次 click 事件，而有些浏览器则只能按其中的一种情况处理。双击灵敏度 (被识别成双击的两次点击之间的最长时间) 可以通过操作系统或浏览器进行设置，通常它是用户可配置的。