jQuery事件绑定与解绑

4,731字

20–30 分钟

jQuery事件绑定与jQuery解绑事件是jQuery事件处理的核心功能，二者相互配合，实现DOM元素事件的灵活管理。jQuery事件绑定指为指定DOM元素绑定特定事件（如点击、鼠标移动等），并指定事件触发时执行的处理函数；jQuery解绑事件则指移除已绑定的事件，避免事件重复触发或无用事件占用资源。实现这两类操作的核心方法为on()、one()、off()，三种方法功能各异、适配不同场景，熟练掌握jQuery事件绑定与jQuery解绑事件的用法，能有效提升前端页面交互开发的效率与规范性。

事件绑定方法

jQuery事件绑定的核心方法有两种，分别为on()与one()，两种方法均能实现事件与元素的关联，核心区别在于事件触发次数的限制，可根据实际交互需求灵活选择，覆盖绝大多数事件绑定场景。

on()方法

on()方法是jQuery事件绑定的核心方法，功能强大、用法灵活，可为指定元素绑定一个或多个事件，支持事件委托、命名空间等高级特性，适用于需要多次触发的事件场景，是jQuery事件绑定中最常用的方法。

语法

// 为元素绑定单个事件
$(selector).on(eventName, handler);

// 为元素绑定多个事件（同处理函数）
$(selector).on(eventNames, handler);

// 为元素绑定多个事件（不同处理函数）
$(selector).on({event1: handler1, event2: handler2, ...});

// 事件委托式绑定（为父元素绑定事件，委托给子元素）
$(parentSelector).on(eventName, childSelector, handler);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery on()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 10px 0; cursor: pointer; }
        .child { border: 1px solid #f00; padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="box" id="singleEvent">单个事件绑定（点击）</div>
    <div class="box" id="multiEvent">多个事件绑定（点击+鼠标移入）</div>
    <div class="box" id="parentBox">
        父元素（事件委托）
        <div class="child">子元素1（委托事件）</div>
        <div class="child">子元素2（委托事件）</div>
    </div>

    <script>
        // 单个事件绑定
        $("#singleEvent").on("click", function() {
            alert("点击事件触发");
        });

        // 多个事件绑定（同处理函数）
        $("#multiEvent").on("click mouseenter", function() {
            $(this).css("background-color", "#e6f7ff");
        });

        // 多个事件绑定（不同处理函数）
        $("#multiEvent").on({
            click: function() {
                alert("点击事件触发");
            },
            mouseleave: function() {
                $(this).css("background-color", "transparent");
            }
        });

        // 事件委托绑定（委托父元素，子元素触发）
        $("#parentBox").on("click", ".child", function() {
            alert("子元素点击事件（委托触发）：" + $(this).text());
        });
    </script>
</body>
</html>

one()方法

one()方法与on()方法功能相似，均用于为指定元素绑定事件，但one()方法绑定的事件仅能触发一次，触发后会自动解绑该事件，无需手动执行jQuery解绑事件操作，适用于仅需触发一次的交互场景。

语法

// 为元素绑定仅触发一次的事件
$(selector).one(eventName, handler);

// 为元素绑定多个仅触发一次的事件
$(selector).one(eventNames, handler);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery one()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 10px 0; cursor: pointer; }
    </style>
</head>
<body>
    <div class="box" id="onceEvent">仅触发一次的点击事件</div>
    <div class="box" id="multiOnceEvent">仅触发一次的多个事件（点击+鼠标移入）</div>

    <script>
        // 绑定仅触发一次的点击事件
        $("#onceEvent").one("click", function() {
            alert("点击事件触发（仅一次）");
            $(this).text("事件已触发，再次点击无效");
        });

        // 绑定仅触发一次的多个事件
        $("#multiOnceEvent").one("click mouseenter", function() {
            $(this).css("background-color", "#ffe485");
            alert("事件触发（仅一次）");
        });
    </script>
</body>
</html>

事件解绑方法

jQuery解绑事件的核心方法为off()，该方法可移除通过on()、one()等方法绑定的事件，支持移除单个事件、多个事件，也可移除指定处理函数的事件或所有事件，是实现jQuery解绑事件的唯一核心方法，适配不同解绑需求。

off()方法

off()方法用于移除已绑定到指定元素的事件，语法灵活，可根据需求精准解绑，若不指定任何参数，将移除该元素上绑定的所有事件，有效避免无用事件占用资源，确保事件处理的规范性。

语法

// 移除元素上所有绑定的事件
$(selector).off();

// 移除元素上指定的单个事件
$(selector).off(eventName);

// 移除元素上指定的多个事件
$(selector).off(eventNames);

// 移除元素上指定事件的指定处理函数
$(selector).off(eventName, handler);

// 移除事件委托绑定的事件
$(parentSelector).off(eventName, childSelector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery off()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .box { border: 1px solid #000; padding: 10px; margin: 10px 0; cursor: pointer; }
        .btn { padding: 5px 10px; margin: 5px 0; }
    </style>
</head>
<body>
    <div class="box" id="target">事件绑定元素</div>
    <button class="btn" id="removeAll">移除所有事件</button>
    <button class="btn" id="removeClick">移除点击事件</button>

    <script>
        // 定义处理函数（用于精准解绑）
        function clickHandler() {
            alert("点击事件触发");
        }

        function mouseenterHandler() {
            $(this).css("background-color", "#e6f7ff");
        }

        // 为元素绑定多个事件
        $("#target").on({
            click: clickHandler,
            mouseenter: mouseenterHandler,
            mouseleave: function() {
                $(this).css("background-color", "transparent");
            }
        });

        // 移除所有事件
        $("#removeAll").click(function() {
            $("#target").off();
            alert("所有事件已解绑");
        });

        // 移除指定的点击事件
        $("#removeClick").click(function() {
            $("#target").off("click", clickHandler);
            alert("点击事件已解绑");
        });
    </script>
</body>
</html>