jQuery - 事件处理

任何现代 Web 应用程序都离不开与之关联的事件。事件是构建交互式网页的机制。jQuery 足够智能，可以处理 HTML 页面上生成的任何事件。首先让我们尝试了解什么是事件。

什么是 jQuery 事件？

jQuery 事件是 jQuery（JavaScript）可以检测到的操作的结果。当这些事件被触发时，您可以使用自定义函数来对事件执行几乎任何操作。这些自定义函数称为事件处理程序。

jQuery 库提供了处理所有 DOM 事件的方法，并且使完整的事件处理比我们在 JavaScript 中可用的方法容易得多。

以下是一些常见事件的示例：

鼠标点击
网页加载
鼠标悬停在元素上
提交 HTML 表单
键盘上的按键等。

下表列出了一些重要的 DOM 事件。

鼠标事件	键盘事件	表单事件	文档事件
click	keypress	submit	load
dblclick	keydown	change	resize
hover	keyup	select	scroll
mousedown		blur	unload
mouseup		focusin	ready

本章只介绍了一些事件方法和属性，有关所有 jQuery 事件方法和属性的完整参考，您可以查阅jQuery 事件参考。

jQuery 事件绑定语法

假设您想在 HTML 文档中点击一个<div>，然后您想对这次点击执行某些操作。要实现这一点，您必须将 jQuery 的click事件绑定到<div>元素，然后定义针对 click 事件的操作。

以下是将 click 事件绑定到 HTML 文档中所有<div>元素的 jQuery 语法

$("div").click();

下一步是定义针对 click 事件的操作。以下是定义一个函数的语法，该函数将在触发click事件时执行。此函数称为jQuery 事件处理程序

$("div").click(function(){
   // jQuery code goes here
});

以下是将 click 事件绑定到任何 DOM 元素的另一种语法

$("div").bind('click', function(){
   // jQuery code goes here
});

jQuery 事件示例

jQuery click 事件

以下是一个将click事件绑定到<div>的示例，其中每当您点击任何 div 时都会显示一个警报框。尝试点击图标以运行以下 jQuery 代码

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(){
         alert('Hi there!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery dblclick 事件

让我们重写上面的代码，将dblclick事件绑定到<div>，其中每当您双击任何 div 时都会显示一个警报框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").dblclick(function(){
         alert('Hi there!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Double click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseenter 事件

以下是一个将mouseenter事件绑定到<div>的示例，其中每当您将光标移到任何 div 上时都会显示一个警报框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseenter(function(){
         alert('Cursor is in!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Bring cursor over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseleave 事件

以下是一个将mouseleave事件绑定到<div>的示例，其中每当您将光标移出 div 时都会显示一个警报框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseleave(function(){
         alert('Curosr is out!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Take cursor out any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mousedown 事件

以下是一个将mousedown事件绑定到<div>的示例，其中每当在任何 div 上按下鼠标左键、中键或右键时都会显示一个警报框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mousedown(function(){
         alert('Mouse button is down!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Press mouse button down over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseup 事件

以下是一个将mouseup事件绑定到<div>的示例，其中每当在任何 div 上释放鼠标左键、中键或右键时都会显示一个警报框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseup(function(){
         alert('Mouse button is released!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Release mouse button over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery 事件对象

每当触发 jQuery 事件时，jQuery 都会将一个事件对象传递给每个事件处理程序函数。事件对象提供了有关事件的各种有用信息。

事件对象通常是不必要的，并且参数被省略，因为当处理程序绑定时通常有足够的环境来准确地知道在处理程序被触发时需要做什么，但是有一些属性您需要访问。

以下事件属性/特性在平台无关的方式下可用且安全地访问：

属性	描述
altKey	如果在触发事件时按下了 Alt 键，则设置为 true，否则设置为 false。在大多数 Mac 键盘上，Alt 键标记为 Option。
ctrlKey	如果在触发事件时按下了 Ctrl 键，则设置为 true，否则设置为 false。
data	在建立处理程序时，作为 bind() 命令的第二个参数传递的值（如果有）。
keyCode	对于 keyup 和 keydown 事件，这将返回按下的键。
metaKey	如果在触发事件时按下了 Meta 键，则设置为 true，否则设置为 false。Meta 键在 PC 上是 Ctrl 键，在 Mac 上是 Command 键。
pageX	对于鼠标事件，指定相对于页面原点的事件的水平坐标。
pageY	对于鼠标事件，指定相对于页面原点的事件的垂直坐标。
relatedTarget	对于某些鼠标事件，标识在触发事件时光标离开或进入的元素。
screenX	对于鼠标事件，指定相对于屏幕原点的事件的水平坐标。
screenY	对于鼠标事件，指定相对于屏幕原点的事件的垂直坐标。
shiftKey	如果在触发事件时按下了 Shift 键，则设置为 true，否则设置为 false。
target	标识触发事件的元素。
timeStamp	创建事件时的的时间戳（以毫秒为单位）。
type	对于所有事件，指定触发事件的类型（例如，click）。
which	对于键盘事件，指定导致事件的键的数字代码，对于鼠标事件，指定按下了哪个按钮（1 表示左键，2 表示中键，3 表示右键）。

示例

以下是一个示例，说明不同的正方形点击如何给出不同的坐标。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(eventObj){
         alert('Event type is ' + eventObj.type);
         alert('pageX : ' + eventObj.pageX);
         alert('pageY : ' + eventObj.pageY);
         alert('Target : ' + eventObj.target.innerHTML);
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

事件处理程序中的 this 关键字

很多时候，在事件处理程序中使用this关键字会变得非常容易。此关键字表示触发事件的 DOM 元素。

以下示例将显示被点击的<div>的内容

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(){
         alert($(this).text());
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

删除事件处理程序

通常，一旦事件处理程序建立，它将在页面生命周期的剩余时间内保持有效。当您想要删除事件处理程序时，可能会有需求。

jQuery 提供了unbind()命令来删除现有的事件处理程序。unbind() 的语法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是参数的描述：

eventType - 包含 JavaScript 事件类型（例如 click 或 submit）的字符串。有关事件类型的完整列表，请参阅下一节。
handler - 如果提供，则标识要删除的特定侦听器。

jQuery 事件参考

您可以在以下页面获取所有 jQuery 事件方法和属性的完整参考：jQuery 事件参考。

打印页面