从零开始学习jQuery (五) jquery事件与事件对象

我们来详细讲解“从零开始学习jQuery (五) jquery事件与事件对象”的完整攻略。

一、jQuery 事件

在前面的几篇文章中，我们已经学习了jQuery的选择器、DOM 方法、效果和动画等。在这篇文章中，我们将学习 jQuery 中的事件。在 web 页面中，事件可以是用户执行的操作，例如点击按钮或链接，还可以是浏览器执行的操作，例如当页面加载完成时。

jQuery 事件绑定非常简单，通过事件的名称和事件处理程序函数来进行绑定。jQuery事件名称可以是原生 DOM 事件名称，例如 "click"、"scroll" 等，另外还有一些 jQuery 独有的事件名称。

二、jQuery 事件对象

在事件被触发时，会产生一个事件对象。事件对象包含有关事件的属性和方法。在 jQuery 中，可以使用 event 对象来获取触发事件的相关信息，例如鼠标点击的坐标。

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

1. type：返回事件类型。
2. target：返回触发事件的元素。
3. pageX 和 pageY：返回事件发生时的鼠标指针距离文档左上角的距离。
4. which：返回触发了哪个键或鼠标按钮。

三、jQuery 事件绑定方法

以下三种方法可以用来实现 jQuery 事件绑定：

1. bind() 方法：为选择的元素添加一个或多个事件处理程序函数。
2. delegate() 方法：基于选择器的事件处理程序绑定，在选定的元素及其子元素上进行绑定的可选方法。
3. on() 方法：用于在选择的元素上添加一个或多个事件处理程序函数。

四、示例说明

示例一

在这个示例中，我们将演示如何通过 bind() 方法来绑定一个单击事件到一个按钮上。

<button id="btnAdd">添加</button>
<p>&nbsp;</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#btnAdd').bind('click', function() {
        $('p').html('按钮已单击！');
    });
</script>

在页面中添加一个按钮，然后通过 bind() 方法为其添加一个单击事件处理程序函数。当按钮被单击时，段落元素的文本将被更新。

示例二

在这个示例中，我们将演示如何使用 on() 方法来绑定多个事件处理程序函数到一个元素上。

<button id="btnTest">测试</button>
<p>&nbsp;</p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#btnTest').on({
        click: function() {
            $('p').html('按钮已单击！');
        },
        mouseenter: function() {
            $(this).css('background-color', 'yellow');
        },
        mouseleave: function() {
            $(this).css('background-color', 'transparent');
        }
    });
</script>

在页面中添加一个按钮，然后使用 on() 方法添加多个事件处理程序函数。在这个示例中，我们添加了一个单击事件处理程序、一个鼠标进入事件处理程序和一个鼠标离开事件处理程序。当按钮被单击时，段落元素的文本将被更新；当鼠标进入时按钮的背景色将变为黄色，当鼠标离开时按钮的背景色将还原。

以上就是从零开始学习jQuery (五) jquery事件与事件对象的完整攻略。