jQuery事件方法

4,604字

19–29 分钟

jQuery事件方法是jQuery事件处理体系的重要组成部分，封装了原生JavaScript事件，提供简洁易用的调用方式，可快速为页面元素绑定各类交互事件，简化事件处理代码，是jQuery开发中实现页面交互的核心手段。

基础事件方法

基础事件方法对应原生JavaScript中的常用事件，jQuery对其进行封装后，无需复杂的事件监听语法，可直接通过方法调用完成事件绑定，常用基础事件方法涵盖点击、提交、双击、鼠标操作等场景。

常用基础事件方法汇总

事件方法	功能说明	对应原生事件
click()	为元素绑定点击事件，或触发元素的点击行为	click
submit()	为表单元素绑定提交事件，或触发表单的提交行为	submit
dblclick()	为元素绑定双击事件，或触发元素的双击行为	dblclick
mouseenter()	为元素绑定鼠标进入事件，鼠标进入元素时触发	mouseenter
mouseleave()	为元素绑定鼠标离开事件，鼠标离开元素时触发	mouseleave

click()方法

语法

// 绑定点击事件
$(selector).click(handler)
// 触发点击事件
$(selector).click()

参数handler为可选函数，用于定义事件触发时执行的逻辑；无参数调用时，将触发匹配元素的点击事件。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery click()方法示例</title>
    <script src="jquery-3.6.4.min.js"></script>
    <style>
        .btn { padding: 8px 16px; background: #f0f0f0; border: none; cursor: pointer; }
        .box { width: 200px; height: 100px; margin-top: 10px; line-height: 100px; text-align: center; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <button class="btn" id="clickBtn">点击触发</button>
    <div class="box" id="showBox">未点击</div>

    <script>
        // 为按钮绑定点击事件
        $("#clickBtn").click(function() {
            $("#showBox").text("已点击，触发click事件");
        });

        // 页面加载完成后，自动触发按钮的点击事件
        $(function() {
            $("#clickBtn").click();
        });
    </script>
</body>
</html>

示例中，通过click()方法为按钮绑定点击事件，点击按钮后修改div元素内容；页面加载完成后，无参数调用click()方法，自动触发按钮的点击行为。

submit()方法

语法

// 绑定表单提交事件
$(selector).submit(handler)
// 触发表单提交事件
$(selector).submit()

该方法仅适用于表单元素（form），handler函数中可通过事件对象阻止表单默认提交行为。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery submit()方法示例</title>
    <script src="jquery-3.6.4.min.js"></script>
    <style>
        form { margin: 20px 0; }
        input { margin: 5px 0; padding: 6px; }
        .tips { color: #666; margin-top: 10px; }
    </style>
</head>
<body>
    <form id="myForm" action="" method="get">
        <input type="text" name="username" placeholder="请输入用户名"><br>
        <input type="submit" value="提交">
    </form>
    <div class="tips" id="tips"></div>

    <script>
        // 为表单绑定提交事件
        $("#myForm").submit(function(event) {
            // 阻止表单默认提交行为
            event.preventDefault();
            var username = $("input[name='username']").val();
            if (username === "") {
                $("#tips").text("用户名不能为空");
            } else {
                $("#tips").text("表单提交成功，用户名：" + username);
            }
        });
    </script>
</body>
</html>

示例中，submit()方法为表单绑定提交事件，通过事件对象的preventDefault()方法阻止表单默认提交，根据用户名输入情况提示对应信息。

复合事件方法

jQuery复合事件方法是对多个基础事件的封装，可一次性实现复杂的交互逻辑，无需分别绑定多个基础事件，常用的复合事件方法有hover()、toggle()等。

hover()方法

hover()方法整合了mouseenter()和mouseleave()两个基础事件，分别对应鼠标进入和离开元素的行为，可同时定义两个事件的处理逻辑。

语法

$(selector).hover(enterHandler, leaveHandler)

参数enterHandler为鼠标进入元素时执行的函数，leaveHandler为鼠标离开元素时执行的函数，两个参数均为可选。

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery hover()方法示例</title>
    <script src="jquery-3.6.4.min.js"></script>
    <style>
        .box { width: 200px; height: 150px; background: #f0f0f0; line-height: 150px; text-align: center; transition: background 0.3s; }
    </style>
</head>
<body>
    <div class="box" id="hoverBox">鼠标移入/移出</div>

    <script>
        // 为div元素绑定hover事件
        $("#hoverBox").hover(
            function() {
                // 鼠标进入时，修改背景色和文本
                $(this).css("background", "#ff6600").text("鼠标已移入");
            },
            function() {
                // 鼠标离开时，恢复背景色和文本
                $(this).css("background", "#f0f0f0").text("鼠标已移出");
            }
        );
    </script>
</body>
</html>

示例中，hover()方法同时定义了鼠标进入和离开的处理逻辑，实现元素样式和文本的动态切换，简化了分别绑定mouseenter()和mouseleave()的操作。

toggle()方法

toggle()方法可实现元素显示与隐藏的切换，同时也可绑定多个点击事件，依次触发，不同jQuery版本中功能略有差异。

语法

// 切换元素显示/隐藏
$(selector).toggle()
// 绑定多个点击事件，依次触发
$(selector).toggle(handler1, handler2, ...)

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery toggle()方法示例</title>
    <script src="jquery-3.6.4.min.js"></script>
    <style>
        .btn { padding: 8px 16px; margin: 10px 0; cursor: pointer; }
        .content { width: 300px; height: 150px; background: #f0f0f0; padding: 10px; display: none; }
    </style>
</head>
<body>
    <button class="btn" id="toggleBtn">切换显示/隐藏</button>
    <div class="content" id="toggleContent">这是需要切换显示/隐藏的内容，点击按钮可控制其显示状态。</div>

    <script>
        // 绑定按钮点击事件，切换内容显示/隐藏
        $("#toggleBtn").click(function() {
            $("#toggleContent").toggle();
        });

        // 为按钮绑定多个点击事件，依次触发
        $("#toggleBtn").toggle(
            function() {
                $(this).text("隐藏内容");
            },
            function() {
                $(this).text("显示内容");
            }
        );
    </script>
</body>
</html>

示例中，toggle()方法实现了两个功能：一是切换div元素的显示与隐藏，二是为按钮绑定两个点击事件，点击时依次切换按钮文本。

事件方法与on()方法对比

jQuery事件方法与on()方法均可实现事件绑定，二者在功能、灵活性和适用场景上存在差异，具体对比如下：

对比维度	jQuery事件方法（如click()、hover()）	on()方法
语法复杂度	语法简洁，直接调用，无需指定事件类型	需指定事件类型，语法相对复杂，但可统一绑定多种事件
灵活性	仅支持单一事件绑定，不支持事件委托（部分版本除外）	支持多事件绑定、事件委托，可绑定命名空间事件，灵活性更高
适用场景	简单交互场景，无需复杂事件逻辑，快速实现基础交互	复杂交互场景，需要事件委托、多事件绑定或事件命名空间
解绑方式	需对应使用unbind()方法解绑，或off()方法解绑	统一使用off()方法解绑，逻辑更统一