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

在这里插入图片描述

在前端开发的舞台上，用户与页面的互动是一场精彩的表演。而 JQuery，作为 JavaScript 的一种封装库，为这场表演提供了更为便捷和优雅的事件绑定方式。其中，on 和 off 两位主角，正是这场奇妙舞曲中的核心演员。在这篇博客中，我们将深入探讨这两位演员的特长、用法以及一些鲜为人知的技巧，带你踏入 JQuery 事件绑定的精妙世界。

`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
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191