极客教程jQuery 事件处理
任何现代的Web应用都离不开与之关联的事件。事件是构建交互式网页的机制。jQuery聪明地处理任何在HTML页面上生成的事件。首先让我们试着理解什么是事件。
什么是jQuery事件
jQuery事件是可以被jQuery（JavaScript）检测到的动作的结果。当这些事件触发时，您可以使用自定义函数来对事件进行几乎任何你想做的事情。这些自定义函数被称为 事件处理程序 。
jQuery库提供了处理所有DOM事件并使完整的事件处理比JavaScript中的可用功能更容易的方法。
以下是一些常见事件的示例：
- 鼠标点击
- 网页加载
- 鼠标悬停在元素上
- 提交HTML表单
- 键盘上的击键等
下表列出了一些重要的DOM事件。
| Mouse Events | Keyboard Events | Form Events | Document Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| hover | keyup | select | scroll |
| mousedown | blur | unload | |
| mouseup | focusin | ready |
这一章节仅涵盖了一些事件方法和属性。若想查看所有jQuery事件方法和属性的完整参考，可以访问jQuery事件参考。
jQuery事件绑定语法
考虑一种情况，你想在HTML文档中点击一个
元素，并对该点击执行一些操作。为了实现这个目标，你需要将一个jQuery click 事件与
元素绑定，并对该点击事件进行定义。
以下是将一个click事件与HTML文档中所有的
元素绑定的jQuery语法：
$("div").click();
下一步是定义一个对点击事件执行的操作。以下是定义一个函数的语法，当 click 事件发生时，该函数将被执行。
事件将被触发。这个函数被称为 jQuery 事件处理程序
$("div").click(function(){
// jQuery代码在这里
});
以下是使用DOM元素绑定点击事件的另一种语法：
$("div").bind('click', function(){
// jQuery代码在这里
});
jQuery事件示例
jQuery点击事件
以下是一个将 点击 事件绑定到<div>的示例，无论您单击哪个div，都会显示一个警告框。
<!doctype html>
<html>
<head>
<title>jQuery示例</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>单击任意一个方块看结果：</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>双击任何一个方块查看结果:</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
jQuery鼠标进入事件
以下是一个将鼠标进入事件与
绑定的示例，每当将光标悬停在任何一个div上时，将显示一个警告框。
<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("div").mouseenter(function(){
alert('光标进入!');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>将光标悬停在任何一个方块上以查看结果：</p>
<div>一</div>
<div>二</div>
<div>三</div>
</body>
</html>
jQuery mouseleave 事件
以下是一个绑定 mouseleave 事件的例子，其中当鼠标指针从 div 中移出时，将显示一个警示框。
<!doctype html>
<html>
<head>
<title>jQuery 示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("div").mouseleave(function(){
alert('鼠标指针在外面！');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>将鼠标指针移出任意一个方块以查看结果：</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
jQuery鼠标按下事件
以下是一个示例，绑定了一个 mousedown 事件到<div>，当在任何div上按下左键、中键或右键时，将显示一个警告框。
<!doctype html>
<html>
<head>
<title>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("div").mousedown(function(){
alert('鼠标按下了！');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>在任何正方形上按下鼠标按钮以查看结果:</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('鼠标按键已释放！');
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>在任意一个方块上释放鼠标按键，以查看结果：</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
jQuery事件对象
每当一个jQuery事件被触发时，jQuery会向每个事件处理函数传递一个 事件对象 。事件对象提供了关于事件的各种有用的信息。
事件对象通常是不必要的，参数被省略，因为当处理程序绑定时通常会有足够的上下文可用，以知道当处理程序被触发时需要做什么，然而有一些需要访问的特定属性。
以下事件属性/属性可在平台无关的方式下访问和安全访问：
| 属性 | 描述 |
|---|---|
| altKey | 如果事件触发时按下了Alt键，则设置为true，否则设置为false。在大多数Mac键盘上，Alt键标记为Option键。 |
| ctrlKey | 设置为true，如果事件触发时按下了Ctrl键，否则为false。 |
| data | 在处理程序建立时，作为第二个参数传递给bind()命令的值（如果有）。 |
| keyCode | 对于keyup和keydown事件，返回按下的键。 |
| metaKey | 设置为true，如果事件触发时按下了Meta键，否则为false。在PC上，Meta键是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>jQuery示例</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
(document).ready(function() {("div").click(function(eventObj){
alert('事件类型是 ' + eventObj.type);
alert('pageX：' + eventObj.pageX);
alert('pageY：' + eventObj.pageY);
alert('目标：' + eventObj.target.innerHTML);
});
});
</script>
<style>
div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
<p>点击任意方块查看结果：</p>
<div>一</div>
<div>二</div>
<div>三</div>
</body>
</html>
在事件处理程序中的this关键字
许多时候，在事件处理程序中使用< b > this < /b > 关键字非常方便。这个关键字表示触发事件的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>点击任意一个方块查看结果：</p>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>
移除事件处理程序
通常情况下，一旦建立了一个事件处理程序，它将在页面的剩余生命周期中有效。但可能有时需要移除事件处理程序。
jQuery提供了 unbind() 命令来移除已存在的事件处理程序。unbind()的语法如下：
selector.unbind(eventType, handler)
或
selector.unbind(eventType)
以下是各参数的说明：
- eventType - 包含一个JavaScript事件类型的字符串，例如click或submit。请参考下一节以获取完整的事件类型列表。
-
handler - 如果提供了，标识要移除的特定监听器。
jQuery事件参考
您可以在以下页面中获得所有jQuery事件方法和属性的完整参考： jQuery事件参考 。