【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>

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

小结

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

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

Happy coding！🚀

作者信息

作者 ： 繁依Fanyi
CSDN： https://techfanyi.blog.csdn.net
掘金：https://juejin.cn/user/4154386571867191

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/195530.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C语言.oj刷题】有序#整型矩阵元素查找##{思路+C源码}

【C语言.oj刷题】有序#整型矩阵元素查找##{思路+C源码}

目录 题目信息 题目分析&#xff1a; 法一&#xff1a; 遍历二维数组&#xff08;低效&#xff09; 思路 源码 局限性 法二&#xff1a; 对每一行二分查找&#xff08;有所提效&#xff09; 思路 源码 局限性 法三&#xff1a; 利用一切有利条件使用二分查找 思路 …
阅读更多...
线性表--链表-1

线性表--链表-1

文章目录 主要内容一.链表练习题1.设计一个递归算法&#xff0c;删除不带头结点的单链表 L 中所有值为 X 的结点代码如下&#xff08;示例&#xff09;: 2.设 L为带头结点的单链表&#xff0c;编写算法实现从尾到头反向输出每个结点的值代码如下&#xff08;示例&#xff09;: …
阅读更多...
git常用命令和参数有哪些？【git看这一篇就够了】

git常用命令和参数有哪些？【git看这一篇就够了】

文章目录 前言常用命令有哪些git速查表奉上常用参数后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;git操作相关 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出…
阅读更多...
Linux应用开发基础知识——输入系统应用编程(八)

Linux应用开发基础知识——输入系统应用编程(八)

前言&#xff1a; 触摸屏分为电阻屏、电容屏。电阻屏结构简单&#xff0c;在以前很流行&#xff1b;电容屏支持多点触摸&#xff0c;现在的手机基本都是使用电容屏。我们应当注意的是LCD、触摸屏不是一回事&#xff0c;LCD 是输出设备&#xff0c;触摸屏是输入设备。制作触摸屏…
阅读更多...
Linux下快速确定目标服务器支持哪些协议和密码套件

Linux下快速确定目标服务器支持哪些协议和密码套件

实现原理是利用TLS协议的特点和握手过程来进行测试和解析响应来确定目标服务器支持哪些TLS协议和密码套件。 在TLS握手过程中&#xff0c;客户端和服务器会协商并使用相同的TLS协议版本和密码套件来进行通信。通过发送特定的握手请求并分析响应&#xff0c;可以确定目标服务器…
阅读更多...
入股合作协议要不要写章程

入股合作协议要不要写章程

公司章程&#xff0c;是注册公司的基本文件&#xff0c;也公司必备的规定公司组织及活动基本规则的书面文件&#xff0c;是公司成立的必不可少的基础&#xff0c;也是公司赖以生存的灵魂。那么&#xff0c;这次要和大家讨论的是有关于入股合作协议要不要写章程的问题了。 入股合…
阅读更多...
Spring cloud - Hystrix服务限流、熔断及降级

Spring cloud - Hystrix服务限流、熔断及降级

Hystrix的作用 Hystrix的主要作用是在微服务环境下防止服务雪崩&#xff0c;确保服务弹性及可用性。 具体来说&#xff0c;Hystrix可以实现&#xff1a; 服务降级&#xff1a;通过fallback实现服务不可达情况下的服务降级作用。熔断&#xff1a;服务不可达的情况下在设定时间…
阅读更多...
Python---练习：封装一个函数，用于生成指定长度的验证码

Python---练习：封装一个函数，用于生成指定长度的验证码

练习涉及相关链接&#xff1a;Python---练习&#xff1a;编写一段Python代码&#xff0c;生成一个随机的4位验证码-CSDN博客 Python----函数中的说明文档-CSDN博客Python---return返回值-CSDN博客 代码&#xff1a; # 定义一个generate_code()函数 def generate_code(num): …
阅读更多...
〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…
阅读更多...
基于一致性算法的微电网分布式控制MATLAB仿真模型

基于一致性算法的微电网分布式控制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 本模型主要是基于一致性理论的自适应虚拟阻抗、二次电压补偿以及二次频率补偿&#xff0c;实现功率均分&#xff0c;保证电压以及频率稳定性。 一致性算法 分布式一致性控制主要分为两类&#xff1a;协调同…
阅读更多...
探索无限可能：APITable免费开源多维表格与可视化数据库远程访问的魅力

探索无限可能：APITable免费开源多维表格与可视化数据库远程访问的魅力

APITable免费开源的多维表格与可视化数据库公网远程访问 文章目录 APITable免费开源的多维表格与可视化数据库公网远程访问前言1. 部署APITable2. cpolar的安装和注册3. 配置APITable公网访问地址4. 固定APITable公网地址 前言 vika维格表作为新一代数据生产力平台&#xff0c…
阅读更多...
JAVA多线程(5)

JAVA多线程(5)

JAVA多线程(5) 线程安全问题概述 卖票问题分析 单窗口卖票 一个窗口(单线程)卖100张票没有问题 单线程程序是不会出现线程安全问题的 多个窗口卖不同的票 3个窗口一起卖票,卖的票不同,也不会出现问题 多线程程序,没有访问共享数据,不会产生问题 多个窗口卖相同的票 3个窗口…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023