jQuery - 事件处理

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

什么是 jQuery 事件？

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

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

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

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

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

鼠标事件	键盘事件	表单事件	记录事件
点击	按键	提交	加载
双击	按键	改变	调整大小
徘徊	按键	选择	滚动
鼠标按下		模糊	卸下
鼠标向上		专注于	准备好

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

jQuery 事件绑定语法

考虑这样一种情况：您想要单击 HTML 文档中的 <div>，然后想要针对此单击执行某些操作。要实现此目的，您必须将 jQuery单击事件与 <div> 元素绑定，然后定义针对该单击事件的操作。

以下是将点击事件与 HTML 文档中所有可用的 <div> 元素绑定的 jQuery 语法：

$("div").click();

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

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

以下是将点击事件与任何 DOM 元素绑定的另一种语法：

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

jQuery 事件示例

jQuery 点击事件

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

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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://www.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://www.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://www.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://www.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://www.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 都会将事件对象传递给每个事件处理函数。事件对象提供有关事件的各种有用信息。

事件对象通常是不必要的并且参数被省略，因为当处理程序必然知道触发处理程序时需要做什么时，通常有足够的上下文可用，但是您需要访问某些属性。

以下事件属性/属性可用且可以以独立于平台的方式安全访问 -

财产	描述
ALT键	如果触发事件时按下 Alt 键，则设置为 true，否则设置为 false。在大多数 Mac 键盘上，Alt 键都标记为 Option。
ctrl键	如果触发事件时按下 Ctrl 键，则设置为 true，否则设置为 false。
数据	当处理程序建立时，该值（如果有）作为第二个参数传递给 bind() 命令。
关键代码	对于 keyup 和 keydown 事件，这将返回按下的键。
元密钥	如果触发事件时按下 Meta 键，则设置为 true，否则设置为 false。Meta 键在 PC 上是 Ctrl 键，在 Mac 上是 Command 键。
第X页	对于鼠标事件，指定事件相对于页面原点的水平坐标。
第Y页	对于鼠标事件，指定事件相对于页面原点的垂直坐标。
相关目标	对于某些鼠标事件，标识触发事件时光标离开或进入的元素。
屏幕X	对于鼠标事件，指定事件相对于屏幕原点的水平坐标。
屏幕Y	对于鼠标事件，指定事件相对于屏幕原点的垂直坐标。
Shift键	如果触发事件时按下 Shift 键，则设置为 true，否则设置为 false。
目标	标识触发事件的元素。
时间戳	创建事件时的时间戳（以毫秒为单位）。
类型	对于所有事件，指定触发的事件类型（例如，单击）。
哪个	对于键盘事件，指定引发事件的按键的数字代码；对于鼠标事件，指定按下的按钮（1 为左按钮，2 为中按钮，3 为右按钮）。

例子

下面的例子展示了不同的方形点击如何给出不同的坐标。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 关键字

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

以下示例将显示单击的 <div> 的内容：

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.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 事件类型的字符串，例如单击或提交。请参阅下一节以获取事件类型的完整列表。
handler - 如果提供，则标识要删除的特定侦听器。

jQuery 事件参考

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