【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 |
相关文章:
【Java 进阶篇】JQuery 事件绑定:`on` 与 `off` 的奇妙舞曲
在前端开发的舞台上,用户与页面的互动是一场精彩的表演。而 JQuery,作为 JavaScript 的一种封装库,为这场表演提供了更为便捷和优雅的事件绑定方式。其中,on 和 off 两位主角,正是这场奇妙舞曲中的核心演员。在这篇博客…...
模块化Common JS 和 ES Module
目录 历程 1.几个函数:全局变量的污染,模块间没有联系 2.对象:暴露成员,外部可修改 3.立即执行函数:闭包实现模块私有作用域 common JS module和Module 过程 模块依赖:深度优先遍历、父 -> 子 -…...
基于java web个人财务管理系统
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...
soc估计:DESIGN AND DEVELOPMENT OF SoC ESTIMATION MODEL USING MACHINE LEARNING
这是一篇印度那边学生的毕业论文,唯一要记录的是里面提到了一个特征构造的思想,记录如下: 论文思想: 特征选用速度、电流、电压、温度、平均电压、平均电流、平均速度,模型用cnnlstmlrlr 平均特征计算方式:…...
2、LeetCode之两数相加
给你两个非空的链表,表示两个非负的整数。它们每位数字都是按照逆序的方式存储的,并且每个节点只能存储一位数字。请你将两个数相加,并以相同形式返回一个表示和的链表。你可以假设除了数字0之外,这两个数都不会以0开头。 输入&am…...
redis三种集群方式
redis有三种集群方式:主从复制,哨兵模式和集群。 1.主从复制 主从复制原理: 从服务器连接主服务器,发送SYNC命令; 主服务器接收到SYNC命名后,开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所…...
Java --- JVM之垃圾回收相关算法
目录 一、垃圾标记算法 1.1、垃圾标记阶段:对象存活判断 1.2、引用计数算法 1.3、可达性分析算法 1.4、GC Roots 二、对象的finalization机制 2.1、生存还是死亡? 三、查看GC Roots 3.1、使用MAT查看 四、使用JProfiler分析OOM 五、清除阶段算…...
CentOS 7.9 安装 nginx
系统版本 # cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core)搜索nginx相关的软件包 yum search nginx显示已安装的与 “nginx” 相关的软件包 yum list | grep nginx列出可用的 Nginx 软件包 yum list nginx --showduplicates安装 Nginx yum install -y ng…...
Newman
近期在复习Postman的基础知识,在小破站上跟着百里老师系统复习了一遍,也做了一些笔记,希望可以给大家一点点启发。 一)如何安装Newman 1、下载并安装NodeJs 在官网下载NodeJs: Download | Node.js(官网的…...
Transformer中WordPiece/BPE等不同编码方式详解以及优缺点
❤️觉得内容不错的话,欢迎点赞收藏加关注😊😊😊,后续会继续输入更多优质内容❤️ 👉有问题欢迎大家加关注私戳或者评论(包括但不限于NLP算法相关,linux学习相关,读研读博…...
Ubuntu20.04安装Beyond Compare 4.4.7
参考链接: 1.Ubuntu20.04 Beyond Compare 4.3.7 安装 2.Ubuntu20.04安装Beyond Compare 4.3.7...
制作含有音频、视频的网页
参考代码如下 <!DOCTYPE html> <html> <head><title>视频音乐网页</title> </head> <body><!-- 视频 --><video width"320" height"240" controls><source src"movie.mp4" type"…...
QPair的介绍及用法
QPair是一个模板类,它存储一对值(key,value),可以是不同的数据类型。QPair的用法有以下几个方面: QPair的构造函数有以下几种形式: QPair():默认构造函数,创建一个空的QP…...
掌握未来技术趋势,Python编程引领人工智能时代
掌握未来技术趋势,Python编程引领人工智能时代 摘要:Python作为一种高级编程语言,在人工智能领域中扮演着越来越重要的角色。本文将通过介绍Python编程的特点、应用场景及发展前景,展望Python未来的发展趋势,并结合代…...
【自留地】后端 - PHP - MySQL - Nginx - Python - Java
PHP ThinkPHP6入门手册 【精选】【汇总】ThinkPHP6入门手册_tp6手册_Rudon滨海渔村的博客-CSDN博客文章浏览阅读5.4k次。安装安装Composer【win】https://getcomposer.org/Composer-Setup.exe【Linux & MacOS】curl -sS https://getcomposer.org/installer | phpmv compo…...
网页视频下载工具 iTubeGo mac中文版软件特色
iTubeGo YouTube Downloader mac是一款功能强大的YouTube视频下载工具。 iTubeGo YouTube Downloader mac软件特色 多种格式支持:iTubeGo YouTube Downloader可以将YouTube视频下载为多种常见的视频和音频格式,包括MP4、MP3、AVI、FLV、MOV、WMV等&…...
深度学习入门(第三天)——卷积神经网络
一、卷积神经网络应用领域 CV领域发展: 比赛中预测错误率的百分比,每年逐步下降。Human是人类肉眼的识别能力,2016年开始已经远高于人类肉眼死别能力,后面就取消了该方向的比赛了。 检测任务: 分类与检索:…...
【Unity小技巧】图片使用的一些常见问题
文章目录 前言Button不规则按钮点击空白区域不响应点击事件1. 设置资源参数2. 代码设置按钮Image的alphaHitTestMinimumThreshold3. 解释:4. 效果 Unity Image 原图比例控制方法一 Preserve Aspect1. 设置勾选Preserve Aspect(保持长宽比)&am…...
ZJU Beamer学习手册(二)
ZJU Beamer学习手册基于 Overleaf 的 ZJU Beamer模板 进行解读,本文则基于该模版进行进一步修改。 参考文献 首先在frame文件夹中增加reference.tex文件,文件内容如下。这段代码对参考文献的引用进行了预处理。 \usepackage[backendbiber]{biblatex} \…...
Shaderlab的组成部分SubShader
文档 渲染标签 渲染状态 渲染通道 Subshader 一个shader文件至少有一个subshader;多个subshader的顺序一般按照效果好到差的顺序编写显示物体的时候,设备从多个subshader中,按从前到后的顺序找到第一个符合的subshader进行执行 Subshader组成 渲染标…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
