jQuery事件处理入门：让页面响应用户操作-代码号

前面讲了很多 DOM 操作和尺寸计算的方法，但静态的页面写得再好，缺少了交互就感觉少了灵魂。jQuery 的事件系统就是给页面注入交互能力的关键一环。事件本质上就是浏览器检测到的“发生了什么”——用户点了鼠标、按了键盘、提交了表单、滚动了页面，这些都是事件。

jQuery 对原生的 DOM 事件做了封装，提供了一套简洁统一的事件绑定方式。不用考虑浏览器兼容性差异，写法一致，上手很快。

什么是事件

在 Web 开发中，事件指的是页面上发生的可以被 JavaScript 捕获的动作。比如用户点击按钮的瞬间、输入框内容变化的那一刻、页面加载完成的时点——这些都是事件触发的具体时刻。

常见的事件类型大致可以分成四类：

鼠标事件： click（单击）、dblclick（双击）、mouseenter（鼠标进入）、mouseleave（鼠标离开）。这类事件在按钮交互、菜单展开收起、拖拽操作中用得非常多。

键盘事件： keyup（按键抬起）、keydown（按键按下）、keypress（字符键按下）。做搜索框实时提示、快捷键功能、输入校验时常用这类事件。

表单事件： submit（表单提交）、change（值改变）、blur（失去焦点）、focus（获得焦点）。表单校验、联动下拉菜单、自动保存等功能都依赖表单事件。

文档/窗口事件： load（加载完成）、scroll（滚动）、resize（窗口大小改变）。做回到顶部按钮、无限滚动加载、响应式布局调整时经常用到。

jQuery 事件绑定的基本语法

大多数 DOM 事件在 jQuery 里都有同名方法。绑定事件的基本写法是：用选择器选中元素，调用对应的事件方法，传入一个回调函数。当事件触发时，回调函数里的代码就会被执行。

$("p").click(function(){
    // 点击段落时执行的代码
});

这个语法结构可以套用到任何事件类型上。比如绑定键盘事件：

$("#searchInput").keyup(function(){
    // 用户松开按键时执行的代码
});

绑定表单焦点事件：

$("input[type='text']").focus(function(){
    // 输入框获得焦点时的代码
});

代码示例：鼠标点击事件

下面这个示例直观展示了 click 事件的使用。页面上有一段文字和一个按钮，点击按钮后文字样式发生变化。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery click 事件示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .highlighted {
            font-size: 150%;
            color: #c0392b;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="textBlock">这是一段可以响应事件的文字</p>
    <button id="actionBtn">点击改变文字样式</button>

    <script>
        $(document).ready(function(){
            $("#actionBtn").click(function(){
                $("#textBlock").toggleClass("highlighted");
            });
        });
    </script>
</body>
</html>

这个例子虽然简单，但包含了事件处理的基本要素：选中触发元素（按钮）、绑定事件（click）、在回调中操作目标元素（文字段落）。这个模式在几乎所有事件处理代码里都会反复出现。

代码示例：表单焦点事件

再看一个表单事件的例子。当输入框获得和失去焦点时，改变它的边框颜色，给用户一个明确的视觉反馈。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery focus/blur 事件示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .input-normal {
            border: 2px solid #ccc;
            padding: 8px;
            width: 260px;
            outline: none;
        }
        .input-focused {
            border-color: #2980b9;
            background-color: #eaf2f8;
        }
    </style>
</head>
<body>
    <form>
        <label for="userName">用户名：</label>
        <input type="text" id="userName" class="input-normal" placeholder="请输入用户名"><br><br>
        <label for="userEmail">邮箱：</label>
        <input type="text" id="userEmail" class="input-normal" placeholder="请输入邮箱地址">
    </form>

    <script>
        $(document).ready(function(){
            $("input[type='text']").focus(function(){
                $(this).addClass("input-focused");
            });
            $("input[type='text']").blur(function(){
                $(this).removeClass("input-focused");
            });
        });
    </script>
</body>
</html>

注意这里用了 $(this) 来指代触发事件的元素本身。在事件回调函数里，this 始终指向触发事件的那个 DOM 元素，用 $(this) 包装一下就能调用 jQuery 方法了。这个细节在写事件处理代码时非常重要，很多逻辑都依赖它来确定操作目标。

关于事件绑定时机

一个容易被忽视的问题是事件绑定的时机。jQuery 代码通常放在 $(document).ready() 里执行，确保 DOM 加载完毕后再绑定事件。如果在此之前尝试绑定，目标元素可能还不存在于 DOM 中，事件自然就绑不上。

对于动态添加到页面上的元素，使用前面讲的直接事件绑定方法（如 click()）是无效的，因为这些元素在绑定时还不存在。处理动态元素的事件需要使用事件委托，用 on() 方法把事件绑定到已经存在的父容器上。这个话题涉及的内容比较多，后面单独展开讲。

事件术语小记

在事件相关的讨论里，“触发”（fire）这个词经常出现。比如“当用户点击按钮时，click 事件被触发”。理解这个表述有助于阅读技术文档和讨论代码逻辑。

本节课程知识要点

jQuery 事件方法对应常见的 DOM 事件，click、keyup、focus、blur、scroll、resize 等都是常用事件类型。
事件绑定的基本写法是 $(selector).eventName(callback)，回调函数在事件触发时执行。
$(this) 在事件回调中指向触发事件的元素本身，是处理元素交互时的关键引用。
事件绑定需要在 DOM 加载完成后进行，放在 $(document).ready() 里是比较稳妥的做法。
动态添加到页面的元素需要用事件委托来绑定事件，直接用事件方法无效。

事件处理是前端交互逻辑的基础设施。jQuery 把五花八门的浏览器事件包装成了一套统一、简洁的 API，降低了入门门槛。理解了事件的基本概念、分类和绑定方式，后面进一步学习事件委托、事件对象、自定义事件等内容就有了根基。接下来会逐步展开更多事件相关的深入话题，把 jQuery 事件体系逐个讲透。

本文标签：

jQuery事件处理入门：让页面响应用户操作