【Java 进阶篇】JQuery 事件绑定：`on` 与 `off` 的奇妙舞曲

原创

繁依Fanyi 2025-06-13 14:27:35 ©著作权

文章标签 html jquery 点击事件 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者繁依Fanyi的原创作品，请联系作者获取转载授权，否则将追究法律责任

【Java 进阶篇】JQuery 事件绑定：`on` 与 `off` 的奇妙舞曲_jquery

在前端开发的舞台上，用户与页面的互动是一场精彩的表演。而 JQuery，作为 JavaScript 的一种封装库，为这场表演提供了更为便捷和优雅的事件绑定方式。其中，on 和 off

on：事件的绑定大师

首先，让我们认识一下 on，这位事件绑定的大师。on

基础用法

首先，让我们来看一个简单的例子。假设有一个按钮，我们想要在点击时弹出一个提示框。

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 使用 on 方法绑定点击事件
        $('#myButton').on('click', function() {
            alert('按钮被点击了！');
        });
    </script>
</body>
</html>

在这个例子中，我们使用 on

多个事件类型

on

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">悬停或点击我</button>

    <script>
        // 同时绑定鼠标悬停和点击事件
        $('#myButton').on('mouseenter click', function() {
            alert('鼠标悬停或点击事件发生了！');
        });
    </script>
</body>
</html>

在这个例子中，我们使用空格将两个事件类型连接在一起，实现了同时监听鼠标悬停和点击事件。当鼠标悬停或按钮被点击时，都会触发相应的回调函数。

事件代理

有时候，我们需要在动态生成的元素上绑定事件。这时候，事件代理就能派上用场了。事件代理通过将事件绑定到父元素上，然后利用事件冒泡的原理，在父元素上捕获事件并判断具体触发事件的子元素。

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        // 使用事件代理绑定列表项点击事件
        $('#myList').on('click', 'li', function() {
            alert('列表项被点击了！');
        });

        // 动态添加一个列表项
        $('#myList').append('<li>Item 4</li>');
    </script>
</body>
</html>

在这个例子中，我们使用了事件代理，将点击事件绑定到了 ul 元素上，但指定了只有 li

解绑事件

on 方法不仅能绑定事件，还能解绑事件，以避免不必要的执行。off

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 绑定点击事件
        function handleClick() {
            alert('按钮被点击了！');
        }

        $('#myButton').on('click', handleClick);

        // 过一段时间后解绑事件
        setTimeout(function() {
            $('#myButton').off('click', handleClick);
        }, 3000);
    </script>
</body>
</html>

在这个例子中，我们首先使用 on 方法绑定了一个点击事件。然后，通过 setTimeout

on

命名空间

在复杂的项目中，可能存在多个相同类型的事件需要管理，这时候就可以使用命名空间（namespace）来区分它们。命名空间可以是一个字符串，用于标识特定的事件集合。

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 使用命名空间绑定点击事件
        $('#myButton').on('click.myNamespace', function() {
            alert('按钮被点击了！');
        });

        // 过一段时间后解绑指定命名空间下的点击事件
        setTimeout(function() {
            $('#myButton').off('click.myNamespace');
        }, 3000);
    </script>
</body>
</html>

在这个例子中，我们在绑定事件时使用了命名空间 .myNamespace，然后在解绑时指定了相同的命名空间。这样，只有在特定命名空间下绑定的事件才会被解绑，不影响其他事件。

事件数据传递

有时候我们需要在触发事件时传递一些额外的数据。on 方法允许我们通过事件对象的 data

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 使用事件数据传递绑定点击事件
        $('#myButton').on('click', { message: 'Hello, World!' }, function(event) {
            alert(event.data.message);
        });
    </script>
</body>
</html>

在这个例子中，我们在绑定点击事件时通过对象 { message: 'Hello, World!' } 传递了一条消息。在回调函数中，我们通过 event.data.message

off：解绑的魔法师

off 方法是 on 的搭档，它用于解绑一个或多个事件处理函数。在上面的例子中，我们已经见识过 off

解绑指定事件类型

off

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 绑定点击和悬停事件
        $('#myButton').on('click', function() {
            alert('按钮被点击了！');
        }).on('mouseenter', function() {
            alert('鼠标悬停在按钮上！');
        });

        // 过一段时间后解绑点击事件
        setTimeout(function() {
            $('#myButton').off('click');
        }, 3000);
    </script>
</body>
</html>

在这个例子中，我们首先使用 on 方法绑定了点击和悬停事件。然后，通过 off

解绑所有事件

如果你想彻底解绑所有类型的事件，可以调用 off

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 绑定点击和悬停事件
        $('#myButton').on('click', function() {
            alert('按钮被点击了！');
        }).on('mouseenter', function() {
            alert('鼠标悬停在按钮上！');
        });

        // 过一段时间后解绑所有事件
        setTimeout(function() {
            $('#myButton').off();
        }, 3000);
    </script>
</body>
</html>

在这个例子中，我们使用 off

解绑指定事件类型及回调函数

如果你只想解绑某个具体事件类型的指定回调函数，可以传递两个参数给 off

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 绑定点击和悬停事件
        function clickHandler() {
            alert('按钮被点击了！');
        }

        function hoverHandler() {
            alert('鼠标悬停在按钮上！');
        }

        $('#myButton').on('click', clickHandler).on('mouseenter', hoverHandler);

        // 过一段时间后解绑点击事件
        setTimeout(function() {
            $('#myButton').off('click', clickHandler);
        }, 3000);
    </script>
</body>
</html>

在这个例子中，我们使用 on 方法绑定了点击和悬停事件的两个回调函数 clickHandler 和 hoverHandler。然后，通过 off 方法解绑了点击事件中的 clickHandler。这样，只有悬停事件仍然会触发 hoverHandler

解绑指定命名空间下的事件

如果你使用了命名空间来管理事件，也可以通过指定命名空间来解绑事件。

登录后复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery 事件绑定</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

    <button id="myButton">点击我</button>

    <script>
        // 使用命名空间绑定点击事件
        $('#myButton').on('click.myNamespace', function() {
            alert('按钮被点击了！');
        });

        // 过一段时间后解绑指定命名空间下的点击事件
        setTimeout(function() {
            $('#myButton').off('click.myNamespace');
        }, 3000);
    </script>
</body>
</html>

小结

通过深入学习 on 和 off 方法，我们已经更好地理解了 JQuery 事件绑定的精髓。on 方法不仅能够简单直接地绑定事件，还支持多种用法和进阶技巧，包括事件代理、命名空间、事件数据传递等。而 off 方法则是 on

在前端的世界里，事件是页面与用户互动的桥梁，了解并熟练使用事件绑定是每位前端开发者的基本功之一。希望这篇博客能够帮助你更好地驾驭 JQuery 中的事件绑定，让你的页面互动更加出色！

Happy coding！🚀

作者信息作者：繁依Fanyi

上一篇：【Python 千题 —— 基础篇】分解数据

下一篇：【Java 进阶篇】JQuery 事件绑定之事件切换：让页面动起来

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯