当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/qq_21484461/article/details/134472058 2025/5/2 23:44:36

在这里插入图片描述

在前端开发的舞台上，用户与页面的互动是一场精彩的表演。而 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

on：事件的绑定大师