8、jQuery 事件处理全解析

jQuery 事件处理全解析

1. 事件监听器基础

事件监听器是浏览器关注用户在页面上操作的方式，当特定操作发生时，它会通知 JavaScript 解释器执行相应代码。借助 jQuery，我们能轻松地为页面上的任何元素添加事件监听器，用户的交互不再局限于点击链接和按钮。

事件监听器的工作流程如下：

graph LR
    A[元素被点击] --> B[事件监听器“听到”点击事件]
    B --> C[事件监听器告知 JavaScript 解释器关联的代码]
    C --> D[JavaScript 解释器运行事件监听器中指定的函数]
    D --> E[访客看到页面上的变化]

示例代码：

$("#showMessage").click(function() {
    alert('You Clicked Me!');
});

上述代码为 ID 为 showMessage 的元素添加了一个点击事件监听器，当该元素被点击时，会弹出一个提示框。

2. 事件绑定方法

为元素添加事件的过程称为事件绑定，事件绑定后，事件监听器会告知 JavaScript 解释器调用相应的函数。jQuery 提供了两种事件绑定方法：

2.1 便捷方法（Method 1）

这是一种快捷方式，仅适用于已经存在的 DOM 元素。示例代码如下：