五、事件方法

女人，我对你有约束力

我该怎么办？

-德沃，

“绳索之歌”

在本章中，我们将依次仔细检查每个可用的事件方法。这些方法用于注册用户与浏览器交互时生效的行为，并进一步操作这些注册的行为。

事件处理程序附件

以下方法是 jQuery 事件处理模块的构建块。

.bind（）

| 将处理程序附加到元素的事件

.bind(eventType[, eventData], handler)

|

参数

eventType：包含 JavaScript 事件类型的字符串，如click或submit
eventData（可选）：将传递给事件处理程序的数据映射
handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

.bind()方法是将行为附加到文档的主要方法。事件类型允许所有 JavaScript 事件类型；以下是跨平台的，建议使用：

blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload

jQuery 库提供了绑定每种事件类型的快捷方法，例如用于.bind('click')的.click()。每个事件类型的说明可在其快捷方式方法的说明中找到。

当事件到达元素时，将激发绑定到该元素的事件类型的所有处理程序。如果注册了多个处理程序，它们将始终按照绑定顺序执行。执行所有处理程序后，事件将沿着正常的事件传播路径继续。有关事件传播的完整讨论，请参见学习 jQuery或中的 W3C 规范 http://www.w3.org/TR/DOM-Level-2-Event/ 。.bind()的一个基本用法是：

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

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

事件处理程序

handler参数取回调函数，如图所示；在处理程序中，关键字this被设置为处理程序绑定到的 DOM 元素。要使用 jQuery 中的元素，可以将其传递给正常的$()函数。例如：

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

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

事件对象

回调函数只接受一个参数；调用处理程序时，JavaScript 事件对象将通过它传递。

事件对象通常是不必要的，并且省略了参数，因为当处理程序必须确切知道触发处理程序时需要做什么时，通常有足够的上下文可用。但是，有时有必要在事件启动时收集有关用户环境的更多信息。JavaScript 提供了诸如.shiftKey（当时是否按住了shift键）、.offsetX（元素中鼠标光标的x坐标）和.type（事件类型）等信息。

事件对象的某些属性和方法在每个平台上都不可用。但是，如果事件由 jQuery 事件处理程序处理，则库会标准化某些属性，以便在任何浏览器上安全使用它们。特别地：

.target：此属性表示启动事件的 DOM 元素。比较event.target和this通常很有用，以确定事件是否由于事件冒泡而被处理。
.pageX：该属性包含鼠标光标相对于页面左边缘的x坐标。
.pageY：该属性包含鼠标光标相对于页面上边缘的y坐标。
.preventDefault()：如果调用此方法，则不会触发事件的默认动作。例如，单击的锚定不会将浏览器带到新的 URL。
.stopPropagation()：此方法防止事件在 DOM 树上冒泡，寻找更多要触发的事件处理程序。

从处理程序返回false相当于对事件对象同时调用.preventDefault()和.stopPropagation()。

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

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

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

传递事件数据

可选的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!

如果存在事件数据，则为.bind()方法的第二个参数；如果不需要向处理程序发送其他数据，则回调将作为第二个也是最后一个参数传递。

注

有关在事件发生时而不是绑定处理程序时将数据传递给处理程序的方法，请参见.trigger()方法参考。

.unbind（）

| 从元素中删除以前附加的事件处理程序。

.unbind([eventType[, handler]])
.unbind(event)

|

参数（第一版）

eventType：包含 JavaScript 事件类型的字符串，如click或submit
处理程序：不再执行的函数

参数（第二版）

事件：传递给事件处理程序的 JavaScript 事件对象

返回值

jQuery 对象，用于链接目的。

说明

任何与.bind()相连的处理器都可以通过.unbind()移除。在最简单的情况下，如果没有参数，.unbind()将删除附加到元素的所有处理程序

$('#foo').unbind();

此版本将删除处理程序，而不考虑其类型。更准确地说，我们可以传递事件类型：

$('#foo').unbind('click');

通过指定“单击”事件类型，只有该事件类型的处理程序将被解除绑定。但是，如果其他脚本可能将行为附加到同一元素，这种方法仍然会产生负面影响。健壮且可扩展的应用通常需要双参数版本，原因如下：

var handler = function() {
  alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

通过命名处理程序，我们可以确保 crossfire 中不会捕获其他函数。请注意，以下内容将不起作用：

$('#foo').bind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

$('#foo').unbind('click', function() {
  alert('The quick brown fox jumps over the lazy dog.');
});

尽管这两个函数在内容上是相同的，但它们是分别创建的，因此 JavaScript 可以自由地将它们作为不同的函数对象。要解除特定处理程序的绑定，我们需要对该函数的引用，而不是对执行相同操作的其他函数的引用。

使用事件对象

该方法的第二种形式是当我们希望从处理程序本身中解除绑定时使用的。例如，假设我们只希望触发事件处理程序三次：

var timesClicked = 0;
$('#foo').bind('click', function(event) {
  alert('The quick brown fox jumps over the lazy dog.');
  timesClicked++;
  if (timesClicked >= 3) {
    $(this).unbind(event);
  }
});

本例中的处理程序必须接受一个参数，以便我们可以捕获事件对象，并在第三次单击后使用它解除处理程序的绑定。事件对象包含.unbind()知道要删除哪个处理程序所需的上下文。

此示例也是闭包的一个示例。由于处理程序引用在函数外部定义的timesClicked变量，因此即使在调用处理程序之间，增加变量也会产生影响。

.one（）

| 将处理程序附加到元素的事件。处理程序最多执行一次。

.one(eventType[, eventData], handler)

|

参数

eventType：包含 JavaScript 事件类型的字符串，如click或submit
eventData（可选）：将传递给事件处理程序的数据映射
处理程序：在触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此方法与.bind()相同，只是处理程序在第一次调用后被解除绑定。例如：

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});

代码执行后，点击 ID 为foo的元素将显示警报。随后的单击将不起任何作用。

此代码相当于：

$('#foo').bind('click', function(event) {
  alert('This will be displayed only once.');
  $(this).unbind(event);
});

换句话说，从规则绑定的处理程序中显式调用.unbind()具有完全相同的效果。

.trigger（）

| 执行附加到事件元素的所有处理程序。

.trigger(eventType[, extraParameters])

|

参数

eventType：包含 JavaScript 事件类型的字符串，如click或submit
extraParameters：传递给事件处理程序的附加参数数组

返回值

jQuery 对象，用于链接目的。

说明

当相应的事件发生时，会触发与.bind()或其快捷方式方法之一连接的任何事件处理程序。但是，它们可以通过.trigger()方法手动发射。对.trigger()的调用将以与用户自然触发事件时相同的顺序执行处理程序：

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

虽然.trigger()模拟事件激活，并使用合成的事件对象完成，但它不能完美地复制自然发生的事件。没有发生事件冒泡，因此必须对实际附加了事件处理程序的元素进行.trigger()调用。默认行为也不能可靠地调用，因此必须在 DOM 元素本身上使用.submit()等方法手动调用。

当我们使用.bind()方法定义自定义事件类型时，.trigger()的第二个参数可能会变得有用。例如，假设我们已将自定义事件的处理程序绑定到元素，而不是像以前那样绑定到内置的click事件：

$('#foo').bind('custom', function(event, param1, param2) {
  alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

事件对象始终作为第一个参数传递给事件处理程序，但如果在.trigger()调用期间指定了其他参数（如此处所示），这些参数也将传递给处理程序。

注意我们在这里传递的额外参数与.bind()方法的eventData参数之间的差异。两者都是向事件处理程序传递信息的机制，但.trigger()的extraParameters参数允许在触发事件时确定信息，而.bind()的eventData参数要求在绑定处理程序时已经计算信息。

文件加载

这些事件处理将页面加载到浏览器中的过程。

$（）

| 指定 DOM 完全加载时要执行的函数。

$(document).ready(handler)
$().ready(handler)
$(handler)

|

参数

handler：DOM 就绪后要执行的函数

返回值

jQuery 对象，用于链接目的。

说明

虽然 JavaScript 提供了在呈现页面时执行代码的load事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构建 DOM 层次结构，就可以运行脚本。传递给.ready()的处理程序保证在 DOM 就绪后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。

如果代码依赖于加载的资产（例如，如果需要图像的维度），则应将代码放在load事件的处理程序中。

.ready()方法通常与<body onload="">属性不兼容。如果必须使用load，请不要使用.ready()或使用 jQuery 的.load()方法将load事件处理程序附加到窗口或更具体的项目，如图像。

提供的所有三种语法都是等效的。.ready()方法只能在与当前文档匹配的 jQuery 对象上调用，因此可以省略选择器。

.ready()方法通常与匿名函数一起使用：

$(document).ready(function() {
  alert('Ready event was triggered.');
});

此代码就位后，加载页面时将显示警报。

当使用另一个 JavaScript 库时，我们可能希望调用$.noConflict()以避免名称空间困难。调用此函数时，$快捷方式不再可用，迫使我们每次正常写入$时都写入jQuery。但是，传递给.ready()方法的处理程序可以接受一个参数，该参数被传递给全局 jQuery 对象。这意味着我们可以在.ready()处理程序的上下文中重命名对象，而不影响其他代码：

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

如果在 DOM 初始化后调用了.ready()，则会立即执行传入的新处理程序。

.load（）

| 将事件处理程序绑定到加载 JavaScript 事件。

.load(handler)

|

参数

handler：触发事件时要执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序是.bind('load', handler)的快捷方式。

当一个元素和所有子元素都已完全加载时，load事件被发送到该元素。此事件可以发送到与 URL 关联的任何元素—图像、脚本、框架和文档本身。

例如，考虑 HTML：

<img class="target" src="hat.gif" width="80" height="54" alt="Hat" />

事件处理程序可以绑定到映像：

$('.target').load(function() {
  $(this).log('Load event was triggered.');
});

现在，图像一加载，就会显示消息。

通常，不必等待所有图像完全加载。如果代码可以更早执行，通常最好将其放入发送给.ready()方法的处理程序中。

注

AJAX 模块还有一个名为.load()的方法。触发哪一个取决于传递的参数集。

.卸载（）

| 将事件处理程序绑定到卸载 JavaScript 事件。

.unload(handler)

|

参数

handler：触发事件时要执行的函数。

返回值

jQuery 对象，用于链接目的。

说明

此处理程序是.bind('unload', handler)的快捷方式。

当用户导航离开页面时，unload事件被发送到window元素。这可能意味着许多事情之一。用户可以单击链接离开页面，或者在地址栏中键入新的 URL。前进和后退按钮将触发事件。关闭浏览器窗口将触发事件。即使重新加载页面也会首先创建一个unload事件。

任何unload事件处理程序都应该绑定到window对象：

$(window).unload(function() {
  alert('Unload event was triggered.');
});

执行此代码后，每当浏览器离开当前页面时，都会显示警报。

无法使用.preventDefault()取消unload事件。此事件可用，以便脚本可以在用户离开页面时执行清理。

.错误（）

| 将事件处理程序绑定到错误 JavaScript 事件。

.error(handler)

|

参数

handler：触发事件时要执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序是.bind('error', handler)的快捷方式。

error事件被发送到可以接收load事件的相同元素。如果元素未正确加载，则调用它。

例如，考虑 HTML：

<img class="target" src="missing.gif" width="80" height="54" alt="Missing Image" />

事件处理程序可以绑定到映像：

$('.target').error(function() {
  $(this).log('Error event was triggered.');
});

如果无法加载图像（例如，因为它不在提供的 URL 中），将显示消息。

本地提供页面时，可能无法正确触发此事件。由于error依赖于正常的 HTTP 状态码，如果 URL 使用file：协议，一般不会触发。

鼠标事件

这些事件由鼠标移动和按钮按下触发。

.mousedown（）

| 将事件处理程序绑定到 mousedown JavaScript 事件，或在元素上触发该事件。

.mousedown(handler)
.mousedown()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('mousedown', handler)的快捷方式，在第二个变体中是.trigger('mousedown')的快捷方式。

当鼠标指针位于某个元素上方并按下鼠标按钮时，mousedown事件被发送到该元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').mousedown(function() {
  $(this).log('Mousedown event was triggered.');
});

现在，如果单击目标按钮，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').mousedown();
});

执行此代码后，单击触发器按钮也将显示消息。

点击任何鼠标按钮时发送mousedown事件。要仅对特定按钮执行操作，我们可以在 Mozilla 浏览器中使用事件对象的which属性（1 表示左按钮，2 表示中按钮，3 表示右按钮），或者在 Internet Explorer 中使用button属性（1 表示左按钮，4 表示中按钮，2 表示右按钮）。这主要用于确保主按钮用于开始拖动操作；如果忽略，当用户尝试使用上下文菜单时，可能会出现奇怪的结果。虽然可以通过这些属性检测中间和右侧按钮，但这并不可靠。例如，在 Opera 和 Safari 中，默认情况下无法检测到鼠标右键单击。

如果用户单击某个元素，然后将鼠标指针拖离该元素或释放该按钮，这仍然被视为mousedown事件。在大多数用户界面中，此操作序列被视为按钮按下的取消，因此通常最好使用click事件，除非我们知道mousedown事件更适合于特定情况。

.mouseup（）

| 将事件处理程序绑定到 mouseup JavaScript 事件，或在元素上触发该事件。

.mouseup(handler)
.mouseup()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('mouseup', handler)的快捷方式，在第二个变体中是.trigger('mouseup')的快捷方式。

当鼠标指针在某个元素上时，mouseup事件被发送到该元素，并释放鼠标按钮。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').mouseup(function() {
  $(this).log('Mouseup event was triggered.');
});

现在，如果单击目标按钮，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').mouseup();
});

此代码执行后，点击触发按钮也会显示消息。

如果用户点击元素外部，拖动到元素上，然后释放按钮，这仍然被视为mouseup事件。在大多数用户界面中，这一系列操作都不被视为按钮按下，因此通常最好使用click事件，除非我们知道mouseup事件更适合于特定情况。

。点击（）

| 将事件处理程序绑定到 click JavaScript 事件，或在元素上触发该事件。

.click(handler)
.click()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('click', handler)的快捷方式，在第二个变体中是.trigger('click')的快捷方式。

当鼠标指针位于某个元素上方，按下并释放鼠标按钮时，click事件被发送到该元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').click(function() {
  $(this).log('Click event was triggered.');
});

现在，如果单击目标按钮，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').click();
});

执行此代码后，单击触发器按钮也将显示消息。

click事件仅在这一系列事件之后触发：

当指针位于元素内部时，按下鼠标按钮。
鼠标按钮在指针位于元素内部时释放。

这通常是采取行动前所需的顺序。如果不需要这样做，mousedown或mouseup事件可能更合适。

.dblclick（）

| 将事件处理程序绑定到`dblclick`JavaScript 事件，或在元素上触发该事件。

.dblclick(handler)
.dblclick()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('dblclick', handler)的快捷方式，在第二个变体中是.trigger('dblclick')的快捷方式。

双击元素时，dblclick事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Click Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').dblclick(function() {
  $(this).log('Dblclick event was triggered.');
});

现在，如果我们双击目标按钮，就会显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').dblclick();
});

此代码执行后，点击触发按钮也会显示消息。

dblclick事件仅在这一系列事件之后触发：

当指针位于元素内部时，按下鼠标按钮。
鼠标按钮在指针位于元素内部时释放。
当指针位于元素内部时，在系统相关的时间窗口内再次按下鼠标按钮。
鼠标按钮在指针位于元素内部时释放。

不建议将处理程序同时绑定到同一元素的click和dblclick事件。触发的事件顺序因浏览器而异，一些浏览器接收两个click事件，另一些浏览器仅接收一个。如果无法避免对单次和双击做出不同反应的界面，则应在click处理程序中模拟dblclick事件。我们可以通过在处理程序中保存时间戳，然后在后续单击时将当前时间与保存的时间戳进行比较来实现这一点。如果差异足够小，我们可以将单击视为双击。

.toggle（）

| 将两个事件处理程序绑定到匹配的元素，在交替单击时执行。

.toggle(handlerEven, handlerOdd)

|

参数

Handler 偶数：每次单击元素时执行的函数。
handlerOdd：每次单击元素时执行的函数。

返回值

jQuery 对象，用于链接目的。

说明

.toggle()方法绑定click事件的处理程序，因此触发click的规则也适用于此处。

例如，考虑 HTML：

<div class="target button">Click Here</div>

事件处理程序可以绑定到此按钮：

$('.target').toggle(function() {
  $(this).log('Toggle event was triggered (handler 1).');
}, function() {
  $(this).log('Toggle event was triggered (handler 2).');
});

第一次单击按钮时，将执行第一个处理程序。第二次，将执行第二个处理程序。随后的单击将在两个处理程序之间循环。

提供.toggle()方法是为了方便。手工实现相同的行为相对简单，如果.toggle()中的假设被证明是有限的，那么这是必要的。例如，如果对同一元件应用两次，.toggle()不能保证正常工作。由于.toggle()在内部使用click处理程序来完成其工作，因此我们必须解除click绑定以删除与.toggle()相关的行为，这样其他click处理程序可能会陷入交叉火力。该实现也会在事件上调用.preventDefault()，因此，如果在元素上调用了.toggle()，则不会跟随链接，也不会单击按钮。

.mouseover（）

| 将事件处理程序绑定到 mouseover JavaScript 事件，或在元素上触发该事件。

.mouseover(handler)
.mouseover()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('mouseover', handler)的快捷方式，在第二个变体中是.trigger('mouseover')的快捷方式。

当鼠标指针进入元素时，mouseover事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').mouseover(function() {
  $(this).log('Mouseover event was triggered.');
});

现在，当鼠标指针移动到目标按钮上时，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').mouseover();
});

此代码执行后，点击触发按钮也会显示消息。

由于事件冒泡，此事件类型可能会导致许多问题。当鼠标指针移动到嵌套元素上时，会向该元素发送一个mouseover事件，然后沿着层次结构向上移动。这会在不合适的时候触发我们的绑定mouseover处理程序。通过使用.hover()方法，我们可以避免这个问题。

.mouseout（）

| 将事件处理程序绑定到**mouseout**JavaScript 事件，或在元素上触发该事件。

.mouseout(handler)
.mouseout()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('mouseout', handler)的快捷方式，在第二个变体中是.trigger('mouseout')的快捷方式。

当鼠标指针离开元素时，mouseout事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').mouseout(function() {
  $(this).log('Mouseout event was triggered.');
});

现在，当鼠标指针移出目标按钮时，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').mouseout();
});

此代码执行后，点击触发按钮也会显示消息。

由于事件冒泡，此事件类型可能会导致许多问题。当鼠标指针移出嵌套元素时，会向该元素发送一个mouseout事件，然后沿着层次结构向上移动。这会在不合适的时候触发我们的绑定mouseout处理程序。通过使用.hover()方法，我们可以避免这个问题。

.悬停（）

| 将两个事件处理程序绑定到匹配的元素，在鼠标指针进入和离开元素时执行。

.hover(handlerIn, handlerOut)

|

参数

handlerIn：鼠标指针进入元素时执行的函数
handlerOut：鼠标指针离开元素时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

.hover()方法绑定mouseover和mouseout事件的处理程序。我们可以使用它在鼠标位于元素内期间简单地将行为应用于元素。考虑 HTML：

<div class="target button">Move Here</div>

现在，我们可以通过单个方法调用将处理程序绑定到进入元素和离开元素：

$('.target').hover(function() {
  $(this).log('Hover event was triggered (entering).');
}, function() {
  $(this).log('Hover event was triggered (leaving).');
});

现在，当鼠标指针进入元素时将显示第一条消息，当鼠标指针离开时将显示第二条消息。

对于mouseover和mouseout事件，由于事件冒泡，通常会收到误报。当鼠标指针越过嵌套元素时，将生成事件，并将冒泡到父元素。.hover()方法包含了检查这种情况的代码，并且什么也不做，因此我们可以在使用.hover()快捷方式时安全地忽略这个问题。

.mousemove（）

| 将事件处理程序绑定到 mousemove JavaScript 事件，或在元素上触发该事件。

.mousemove(handler)
.mousemove()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('mousemove', handler)的快捷方式，在第二个变体中是.trigger('mousemove')的快捷方式。

当鼠标指针在元素内部移动时，mousemove事件被发送到元素。任何 HTML 元素都可以接收此事件。

例如，考虑 HTML：

<div class="target button">Move Here</div>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到目标按钮：

$('.target').mousemove(function() {
  $(this).log('Mousemove event was triggered.');
});

现在，当鼠标指针在目标按钮内移动时，将显示消息。我们还可以在单击第二个按钮时触发事件：

$('.trigger').click(function() {
  $('.target').mousemove();
});

此代码执行后，点击触发按钮也会显示消息。

在跟踪鼠标移动时，我们通常需要清楚地知道鼠标指针的实际位置。传递给处理程序的事件对象包含一些有关鼠标坐标的信息。可以使用诸如.clientX, .offsetX和.pageX之类的属性，但不同浏览器对它们的支持不同。幸运的是，jQuery 规范化了.pageX和.pageY属性，因此它们可以在所有浏览器中使用。这些属性提供鼠标指针相对于页面左上角的X和Y坐标。

我们需要记住，mousemove事件是在鼠标指针移动时触发的，即使是一个像素。这意味着在很短的时间内可以生成数百个事件。如果处理程序必须执行任何重要的处理，或者如果存在多个事件处理程序，这可能会严重消耗浏览器的性能。因此，重要的是尽可能优化mousemove处理程序，并在不再需要它们时尽快解除绑定。

一种常见的模式是从mousedown手中绑定mousemove手，然后从相应的mouseup手中解除绑定。如果实现此事件序列，请记住，mouseup事件可能被发送到与mousemove事件不同的 HTML 元素。为了说明这一点，mouseup处理程序通常应该绑定到 DOM 树中较高的元素，例如<body>。

表单事件

这些事件指的是<form>元素及其内容。

.焦点（）

| 将事件处理程序绑定到焦点 JavaScript 事件，或在元素上触发该事件。

.focus(handler)
.focus()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('focus', handler)的快捷方式，在第二个变体中是.trigger('focus')的快捷方式。

focus事件在获得焦点时发送给元素。最初，此事件仅适用于表单元素，如<input>。在最近的浏览器中，事件的域已经扩展到包括所有元素类型。一个元素可以通过键盘命令获得焦点，比如Tab键，或者通过鼠标点击该元素。

浏览器通常以某种方式高亮显示具有焦点的图元，例如，在图元周围有一条虚线。焦点用于确定哪个元素是第一个接收键盘相关事件的元素。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到第一个输入字段：

$('.target').focus(function() {
  $(this).log('Focus event was triggered.');
});

现在，如果我们单击第一个字段，或者从另一个字段单击选项卡，则会显示消息。我们可以在单击按钮时触发事件：

$('.trigger').click(function() {
  $('.target').focus();
});

此代码执行后，点击触发按钮也会显示消息。

注

触发对隐藏元素的关注会导致 Internet Explorer 中出现错误。注意只调用.focus()而不调用可见元素上的参数。

.blur（）

| 将事件处理程序绑定到 blur JavaScript 事件，或在元素上触发该事件。

.blur(handler)
.blur()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('blur', handler)的快捷方式，在第二个变体中是.trigger('blur')的快捷方式。

当元素失去焦点时，blur事件被发送到元素。最初，此事件仅适用于表单元素，如<input>。在最近的浏览器中，事件的域已经扩展到包括所有元素类型。通过键盘命令，如Tab键，或通过鼠标单击页面上的其他位置，元素可能会失去焦点。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到第一个输入字段：

$('.target').blur(function() {
  $(this).log('Blur event was triggered.');
});

现在，如果我们单击第一个字段，然后单击或制表符，则会显示消息。我们可以在单击按钮时触发事件：

$('.trigger').click(function() {
  $('.target').blur();
});

此代码执行后，点击触发按钮也会显示消息。

.变更（）

| 将事件处理程序绑定到 ChangeJavaScript 事件，或在元素上触发该事件。

.change(handler)
.change()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('change', handler)的快捷方式，在第二个变体中是.trigger('change')的快捷方式。

当元素的值发生变化时，change事件被发送到元素。此事件仅限于<input type="text">字段、<textarea>框和<select>元素。对于选择框，当用户使用鼠标进行选择时，事件将立即触发，但对于其他元素类型，事件将延迟到元素失去焦点为止。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到文本输入和选择框：

$('.target').change(function() {
  $(this).log('Change event was triggered.');
});

现在，当从下拉列表中选择第二个选项时，将显示消息。如果我们更改字段中的文本，然后单击“离开”，也会显示该字段。但是，如果字段失去焦点而内容没有更改，则不会触发事件。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').change();
});

执行此代码后，单击触发器按钮也将显示消息。消息将显示两次，因为处理程序已绑定到两个表单元素上的更改事件。

.选择（）

| 将事件处理程序绑定到 select JavaScript 事件，或在元素上触发该事件。

.select(handler)
.select()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('select', handler)的快捷方式，在第二个变体中是.trigger('select')的快捷方式。

当用户在元素内部进行文本选择时，select事件被发送到元素。此事件仅限于<input type="text">字段和<textarea>框。

例如，考虑 HTML：

<form>
  <input class="target" type="text" value="The quick brown fox jumps over the lazy dog." />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到文本输入：

$('.target').select(function() {
  $(this).log('Select event was triggered.');
});

现在，当选择文本的任何部分时，将显示消息。仅设置插入点的位置不会触发事件。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').select();
});

此代码执行后，点击触发按钮也会显示消息。此外，该字段上的默认select操作将被触发，因此将选择整个文本字段。

.提交（）

| 将事件处理程序绑定到 submit JavaScript 事件，或在元素上触发该事件。

.submit(handler)
.submit()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('submit', handler)的快捷方式，在第二个变体中是.trigger('submit')的快捷方式。

当用户试图提交表单时，submit事件被发送到元素。它只能连接到<form>元件。表单可以通过点击显式的<input type="submit">按钮提交，也可以在表单元素有焦点时按回车提交。

注

根据浏览器的不同，输入键可能仅在表单只有一个文本字段时，或仅当存在提交按钮时，才会导致表单提交。除非通过观察按下回车键的keypress事件来强制问题，否则接口不应依赖此键的特定行为。

例如，考虑 HTML：

<form class="target" action="foo.html">
  <input type="text" />
  <input type="submit" value="Go" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到表单：

$('.target').submit(function() {
  $(this).log('Submit event was triggered.');
});

现在，当表单提交时，将显示消息。这发生在实际提交之前，因此我们可以通过对事件调用.preventDefault()或从处理程序返回false来取消提交操作。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').submit();
});

此代码执行后，点击触发按钮也会显示消息。此外，表单上的默认提交操作将被激发，因此表单将被提交。

键盘事件

这些事件由键盘上的键触发。

.keydown（）

| 将事件处理程序绑定到 keydown JavaScript 事件，或在元素上触发该事件。

.keydown(handler)
.keydown()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('keydown', handler)的快捷方式，在第二个变体中是.trigger('keydown')的快捷方式。

当用户第一次按下键盘上的键时，keydown事件被发送到元素。它可以附加到任何元素，但事件只发送到具有焦点的元素。可聚焦元素在浏览器之间可能有所不同，但表单元素始终可以获得焦点，因此对于这种事件类型来说是合理的候选者。

例如，考虑 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到输入字段：

$('.target').keydown(function() {
  $(this).log('Keydown event was triggered.');
});

现在，当插入点位于字段内并按下一个键时，将显示消息。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keydown();
});

此代码执行后，点击触发按钮也会显示消息。

如果需要捕捉任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到document对象是很有用的。由于事件冒泡，除非显式停止，否则所有按键都将沿着 DOM 到达document对象。

为了确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode属性通常保存此信息，但在一些较旧的浏览器中.which存储密钥代码。JavaScript 的String对象有一个.fromCharCode()方法，可用于将此数字代码转换为包含字符的字符串，以便进一步处理。

fix_events.js插件进一步标准化了不同浏览器中的事件对象。有了这个插件，我们可以在所有浏览器中使用.which来检索密钥代码。

.按键（）

| 将事件处理程序绑定到 keypress JavaScript 事件，或在元素上触发该事件。

.keypress(handler)
.keypress()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('keypress', handler)的快捷方式，在第二个变体中是.trigger('keypress')的快捷方式。

当浏览器注册键盘输入时，keypress事件被发送到元素。这类似于keydown事件，但重复按键的情况除外。如果用户按住一个键，则会触发一次keydown事件，但会为每个插入的字符触发单独的keypress事件。此外，修改键（例如Shift会导致keydown事件，但不会导致keypress事件。

keypress事件处理程序可以附加到任何元素，但事件只发送到具有焦点的元素。可聚焦元素在浏览器之间可能有所不同，但表单元素始终可以获得焦点，因此对于这种事件类型来说是合理的候选者。

例如，考虑 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到输入字段：

$('.target').keypress(function() {
  $(this).log('Keypress event was triggered.');
});

现在，当插入点位于字段内并按下一个键时，将显示消息。如果按下该键，消息将重复。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keypress();
});

此代码执行后，点击触发器按钮也会显示消息。

如果需要捕捉任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到document对象是很有用的。除非由于事件冒泡而显式停止，否则所有按键都将沿着 DOM 到达document对象。

为了确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode属性通常保存此信息，但在一些较旧的浏览器中.which存储密钥代码。JavaScript 的String对象有一个.fromCharCode()方法，可用于将此数字代码转换为包含字符的字符串，以便进一步处理。

请注意，keydown和keyup提供了一个代码，表示按下了哪个键，keypress表示输入了哪个字符。例如，keydown和keyup将小写字母“a”报告为 65，但keypress将小写字母“a”报告为 97。所有事件都将大写字母“A”报告为 97。这可能是决定使用哪种事件类型的主要动机。

.keyup（）

| 将事件处理程序绑定到 keyup JavaScript 事件，或在元素上触发该事件。

.keyup(handler)
.keyup()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('keyup', handler)的快捷方式，在第二个变体中是.trigger('keyup')的快捷方式。

当用户释放键盘上的键时，keyup事件被发送到元素。它可以附加到任何元素，但事件只发送到具有焦点的元素。可聚焦元素在浏览器之间可能有所不同，但表单元素始终可以获得焦点，因此对于这种事件类型来说是合理的候选者。

例如，考虑 HTML：

<form>
  <input class="target" type="text" />
</form>
<div class="trigger button">Trigger</div>

事件处理程序可以绑定到输入字段：

$('.target').keyup(function() {
  $(this).log('Keyup event was triggered.');
});

现在，当插入点位于字段内，按下并释放一个键时，将显示消息。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').keyup();
});

此代码执行后，点击触发按钮也会显示消息。

如果需要捕捉任何地方的按键（例如，在页面上实现全局快捷键），将此行为附加到document对象是很有用的。除非由于事件冒泡而显式停止，否则所有按键都将沿着 DOM 到达document对象。

为了确定按下了哪个键，我们可以检查传递给处理程序函数的事件对象。.keyCode属性通常保存此信息，但在一些较旧的浏览器中.which存储密钥代码。JavaScript 的String对象有一个.fromCharCode()方法，可用于将此数字代码转换为包含字符的字符串，以便进一步处理。

浏览器事件

这些事件与整个浏览器窗口相关。

.resize（）

| 将事件处理程序绑定到 resize JavaScript 事件，或在元素上触发该事件。

.resize(handler)
.resize()

|

参数（第一版）

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('resize', handler)的快捷方式，在第二个变体中是.trigger('resize')的快捷方式。

当浏览器窗口的大小改变时，resize事件被发送到window元素：

$(window).resize(function() {
  alert('Resize event was triggered.');
});

现在，无论何时更改浏览器窗口的大小，都会显示消息。

resize处理程序中的代码不应依赖于该处理程序的调用次数。根据具体实施情况，resize事件可以在调整大小过程中连续发送（Internet Explorer 中的典型行为），也可以在调整大小操作结束时仅发送一次（FireFox 中的典型行为）。

.滚动（）

| 将事件处理程序绑定到 scroll JavaScript 事件，或在元素上触发该事件。

.scroll(handler)
.scroll()

|

参数

handler：每次触发事件时执行的函数

返回值

jQuery 对象，用于链接目的。

说明

此处理程序在第一个变体中是.bind('scroll', handler)的快捷方式，在第二个变体中是.trigger('scroll')的快捷方式。

当用户滚动到元素中的不同位置时，scroll事件被发送到元素。它不仅适用于window对象，还适用于具有overflow: scrollCSS 属性的可滚动帧和元素。

例如，考虑 HTML：

<div class="target" style="overflow: scroll; width: 200px; height: 100px;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="trigger button">Trigger</div>

样式定义的存在是为了使目标元素足够小，可以滚动。scroll事件处理程序可以绑定到此元素：

$('.target').scroll(function() {
  $(this).log('Scroll event was triggered.');
});

现在，当用户向上或向下滚动文本时，将显示消息。单击按钮时，我们可以手动触发事件：

$('.trigger').click(function() {
  $('.target').scroll();
});

此代码执行后，点击触发按钮也会显示消息。

无论什么原因，只要元素的滚动位置发生变化，就会发送一个scroll事件。在滚动条上单击或拖动鼠标、在元素内部拖动、按箭头键或使用鼠标滚轮都可能导致此事件。

Files

05.md

Latest commit

History

05.md

File metadata and controls

五、事件方法

事件处理程序附件

.bind（）

参数

返回值

说明

传递事件数据

注

.unbind（）

参数（第一版）

参数（第二版）

返回值

说明

使用事件对象

.one（）

参数

返回值

说明

.trigger（）

参数

返回值

说明

文件加载

$（）

参数

返回值

说明

.load（）

参数

返回值

说明

注

.卸载（）

参数

返回值

说明

.错误（）

参数

返回值

说明

鼠标事件

.mousedown（）

参数（第一版）

返回值

说明

.mouseup（）

参数（第一版）

返回值

说明

。点击（）

参数（第一版）

返回值

说明

.dblclick（）

参数（第一版）

返回值

说明

.toggle（）

参数

返回值

说明

.mouseover（）

参数（第一版）

返回值

说明

.mouseout（）

参数（第一版）

返回值

说明

.悬停（）

参数

返回值

说明

.mousemove（）