发表更新软件开发 / jQuery6 分钟读完 (大约845个字)0次访问

9 事件处理之事件对象

在上一篇中，我们探讨了 jQuery 中事件的绑定与解绑。接下来，我们将深入了解涉及事件处理的核心内容：事件对象。了解事件对象对于掌握事件如何在 DOM 中传递和反应至关重要。

什么是事件对象？

事件对象是 jQuery 事件处理函数中的一个重要组成部分。当事件被触发时，jQuery 会创建一个事件对象并传递给事件处理函数。这个对象包含了事件的相关信息，比如事件的类型、目标元素、坐标位置等。

在处理事件时，事件对象会作为第一个参数传递给事件处理函数。你可以通过这个对象访问到许多有用的信息。

常见的事件对象属性

下面是一些常用的事件对象属性：

  • type：事件的类型，例如 "click"、"keydown" 等。
  • target：事件的目标元素，在事件被触发时，用户点击的元素。
  • currentTarget：事件的当前处理元素，通常是在事件处理程序中注册的元素。
  • pageX 和 pageY：事件发生时鼠标指针相对于文档页面的坐标。
  • preventDefault()：阻止事件的默认行为，例如链接的跳转。
  • stopPropagation()：阻止事件向父元素传播。

事件对象的详细使用

让我们通过一个简单的示例来展示如何使用事件对象。

例如：获取点击位置和目标元素

以下代码演示了如何获取鼠标点击的位置及点击的目标元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container" style="width: 300px; height: 300px; background: lightblue;">
        点击这里
    </div>
    <div id="info" style="margin-top: 20px;"></div>

    <script>
        $(document).ready(function() {
            $('#container').on('click', function(event) {
                // 获取事件对象
                const x = event.pageX; // 鼠标的 X 坐标
                const y = event.pageY; // 鼠标的 Y 坐标
                const target = event.target.tagName; // 目标元素的标签名

                // 更新信息显示
                $('#info').html(`你点击了 ${target}，位置为 (${x}, ${y})`);
            });
        });
    </script>
</body>
</html>

在这个例子中，当用户点击 #container 这个 DIV 元素时，事件对象会提供点击时的坐标和目标元素。使用 event.pageX 和 event.pageY 我们可以获取到鼠标的位置，使用 event.target 获取点击的具体元素。最终，这些信息会被显示在页面上。

阻止默认行为和事件传播

另一个常用的功能是阻止默认行为和事件传播。下面的代码展示了如何实现：

1
2
3
4
5
6
7
8
9
10
11
<a href="https://www.example.com" id="myLink">点击我 (链接)</a>

<script>
    $(document).ready(function() {
        $('#myLink').on('click', function(event) {
            // 阻止链接的默认跳转行为
            event.preventDefault();
            alert('链接的默认行为已被阻止！');
        });
    });
</script>

在这里，当用户点击链接时，event.preventDefault() 会阻止浏览器按照默认行为跳转到新的页面。

结束语

事件对象在 jQuery 事件处理中扮演了重要角色。理解和灵活运用事件对象的各种属性和方法，可以大大增强你的前端交互能力。在下一篇中，我们将深入探讨事件代理，它与事件对象的运用密切相关，将帮助我们更高效地管理事件的绑定。请继续关注！

9 事件处理之事件对象

https://zglg.work/jquery-zero/9/

作者

IT教程网(郭震)

发布于

2024-08-15

更新于

2024-08-16

许可协议

#

分享转发

学习下节

复习上节

交流

更多教程加公众号

更多教程加公众号

加入星球获取PDF

加入星球获取PDF

打卡评论

×