【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.rhkb.cn/news/198085.html

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

相关文章

Smart Tomcat的使用

Smart Tomcat的使用

文章目录 Smart Tomcat的作用Smart Tomcat的安装Smart Tomcat的配置Smart Tomcat的启动 Smart Tomcat的作用 我们知道使用Servlet来完成一个项目一共需要七个步骤&#xff0c;即创建maven项目、添加依赖、创建目录结构、编写代码、打包程序、部署程序、验证程序。这样的确是完…
阅读更多...
AI机器学习 | 基于librosa库和使用scikit-learn库中的分类器进行语音识别

AI机器学习 | 基于librosa库和使用scikit-learn库中的分类器进行语音识别

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…
阅读更多...
【LeetCode刷题-树】-- 572.另一棵树的子树

【LeetCode刷题-树】-- 572.另一棵树的子树

572.另一棵树的子树 方法&#xff1a;深度优先搜索暴力匹配 深度优先搜索枚举root中的每一个节点&#xff0c;判断这个点的子树是否与subroot相等 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right…
阅读更多...
Oracle如何快速删除表中重复的数据

Oracle如何快速删除表中重复的数据

方法一&#xff1a; 在Oracle中&#xff0c;你可以使用DELETE语句结合ROWID和子查询来删除重复的记录。以下是一个示例&#xff1a; DELETE FROM your_table WHERE ROWID NOT IN (SELECT MAX(ROWID)FROM your_tableGROUP BY column1, column2, ... -- 列出用于判断重复的列 )…
阅读更多...
深度学习：欠拟合与过拟合

深度学习：欠拟合与过拟合

1 定义 1.1 模型欠拟合 AI模型的欠拟合&#xff08;Underfitting&#xff09;发生在模型未能充分学习训练数据中的模式和结构时&#xff0c;导致它在训练集和验证集上都表现不佳。欠拟合通常是由于模型太过简单&#xff0c;没有足够的能力捕捉到数据的复杂性和细节。 1.2 模型…
阅读更多...
快速搜索多个word、excel等文件中内容

快速搜索多个word、excel等文件中内容

如何快速搜索多个word、excel等文件中内容 操作方法 以win11系统为介绍对象。 首先我们打开“我的电脑”-->“文件夹选项”-->“搜索”标签页,在“搜索内容”下方选择&#xff1a;"始终搜索文件名和内容&#xff08;此过程可能需要几分钟&#xff09;"。然后…
阅读更多...
react-router-dom 版本6.18.0中NavLink的api和属性介绍

react-router-dom 版本6.18.0中NavLink的api和属性介绍

React Router 是一个基于 React 的路由库&#xff0c;它可以帮助我们在 React 应用中实现页面的切换和路由的管理。而 NavLink 则是 React Router 中的一个组件&#xff0c;它可以帮助我们实现导航栏的样式设置和路由跳转。 在 React Router 版本6.18.0 中&#xff0c;NavLink…
阅读更多...
【C++】入门三

【C++】入门三

接下来我们说一下引用这个概念&#xff0c;那么什么是引用呢&#xff1f;简单来说引用就是取别名&#xff0c;比如有一个变量叫a&#xff0c;现在我给它取了一个别名叫b&#xff0c;那么此时a和b管理的都是一块空间 这个例子就可以很好的体现a和b管理的是同一块空间&#xff0…
阅读更多...
iframe渲染后端接口文件和实现下载功能

iframe渲染后端接口文件和实现下载功能

一&#xff1a;什么是iframe&#xff1f; 1、介绍 iframe 是HTML 中的一种标签&#xff0c;全称为 Inline Frame&#xff0c;即内联框架。它可以在网页中嵌入其他页面或文档&#xff0c;将其他页面的内容以框架的形式展示在当前页面中。iframe的使用方式是通过在HTML文档中插入…
阅读更多...
Idea远程debug

Idea远程debug

Idea远程debug 一、方法 1.1、启动时加参数 java -agentlib:jdwptransportdt_socket,servery,suspendn,address5005 -jar remote-debug-0.0.1-SNAPSHOT.jar1.2、运行时加参数 在没有显式-agentlib:jdwp参数的情况下进行远程调试&#xff1a; 首先&#xff0c;确保您的Sprin…
阅读更多...
六.Linux远程登录

六.Linux远程登录

1.说明&#xff1a;公司开发的时候&#xff0c;具体的应用场景是这样的 1.linux服务器是开发小组共享 2.正式上线的项目是运行在公网 3.因此程序员需要远程登录到Linux进行项目管理或者开发 4.画出简单的网络拓扑示意图(帮助理解) 5.远程登录客户端有Xshell6、Xftp6&#xff0…
阅读更多...
闭眼检测实现

闭眼检测实现

引言 这段代码是一个实时眼睛状态监测程序&#xff0c;可以用于监测摄像头捕获的人脸图像中的眼睛状态&#xff0c;判断眼睛是否闭合。具体应用实现作用说明如下&#xff1a; 1. 实时监测眼睛状态 通过摄像头捕获的实时视频流&#xff0c;检测人脸关键点并计算眼睛的 EAR&a…
阅读更多...
vue3项目安装eslint和prettier

vue3项目安装eslint和prettier

【几乎最全/全网最长的 2 万 字】前端工程化完整流程&#xff1a;从头搭到尾&#xff08;vue3 vite qiankun docker tailwindcss iview......&#xff09;_前端工程化流程-CSDN博客 vue3tsvite项目中使用eslintprettierstylelinthusky指南 - 掘金 上面两篇文章相互结合操…
阅读更多...
【Python大数据笔记_day10_Hive调优及Hadoop进阶】

【Python大数据笔记_day10_Hive调优及Hadoop进阶】

hive调优 hive官方配置url: Configuration Properties - Apache Hive - Apache Software Foundation hive命令和参数配置 hive参数配置的意义: 开发Hive应用/调优时&#xff0c;不可避免地需要设定Hive的参数。设定Hive的参数可以调优HQL代码的执行效率&#xff0c;或帮助定位问…
阅读更多...
MySQL 的执行原理（四）

MySQL 的执行原理（四）

5.5. MySQL 的查询重写规则 对于一些执行起来十分耗费性能的语句&#xff0c;MySQL 还是依据一些规则&#xff0c;竭尽全力的把这个很糟糕的语句转换成某种可以比较高效执行的形式&#xff0c;这个过程也可以 被称作查询重写。 5.5.1. 条件化简 我们编写的查询语句的搜索条件…
阅读更多...
git常用命令和参数有哪些？【git看这一篇就够了】

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

文章目录 前言常用命令有哪些git速查表奉上常用参数后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;git操作相关 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出…
阅读更多...
HCIA-综合实验（三）

HCIA-综合实验（三）

综合实验&#xff08;三&#xff09; 1 实验拓扑2 IP 规划3 实验需求一、福州思博网络规划如下&#xff1a;二、上海思博网络规划如下&#xff1a;三、福州思博与上海思博网络互联四、网络优化 4 配置思路4.1 福州思博配置在 SW1、SW2、SW3 上配置交换网络SW1、SW2、SW3 运行 S…
阅读更多...
记录一些涉及到界的题

记录一些涉及到界的题

文章目录 coppersmith的一些相关知识题1 [N1CTF 2023] e2Wrmup题2 [ACTF 2023] midRSA题3 [qsnctf 2023]浅记一下 coppersmith的一些相关知识 上界 X c e i l ( 1 2 ∗ N β 2 d − ϵ ) X ceil(\frac{1}{2} * N^{\frac{\beta^2}{d} - \epsilon}) Xceil(21​∗Ndβ2​−ϵ) …
阅读更多...
贪吃蛇小游戏

贪吃蛇小游戏

一. 准备工作 首先获取贪吃蛇小游戏所需要的头部、身体、食物以及贪吃蛇标题等图片。、 然后&#xff0c;创建贪吃蛇游戏的Java项目命名为snake_game&#xff0c;并在这个项目里创建一个文件夹命名为images&#xff0c;将图片素材导入文件夹。 再在src文件下创建两个包&#…
阅读更多...
【Go入门】 Go如何使得Web工作

【Go入门】 Go如何使得Web工作

【Go入门】 Go如何使得Web工作 前面小节介绍了如何通过Go搭建一个Web服务&#xff0c;我们可以看到简单应用一个net/http包就方便的搭建起来了。那么Go在底层到底是怎么做的呢&#xff1f;万变不离其宗&#xff0c;Go的Web服务工作也离不开我们第一小节介绍的Web工作方式。 w…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023