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

jQuery事件

news 2025/9/14 14:23:31

1. jQuery事件注册

单个事件注册

语法：

element.事件(function(){})

eg：$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}        .current {background-color: purple;}</style><script src="jquery.min.js"></script>
</head>
<body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function() {// 1. 单个事件注册$("div").click(function() {$(this).css("background", "purple");});$("div").mouseenter(function() {$(this).css("background", "skyblue");});})</script>
</body>
</html>

2. jQuery事件处理

2.1 事件处理on()绑定事件

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：element.on(events,[selector],fn)

  1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
  2. selector: 元素的子元素选择器 。
  3. fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

 $(“div”).on({mouseover: function(){}, mouseout: function(){},click: function(){}	
});

如果事件处理程序相同

 $(“div”).on(“mouseover mouseout”, function() {$(this).toggleClass(“current”);});

on() 方法优势2：

可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {alert('hello world!');
});

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

 $(“div").on("click",”p”, function(){alert("俺可以给动态生成的元素绑定事件")});$("div").append($("<p>我是动态创建的p</p>"));

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}      .current {background-color: purple;}</style><script src="jquery.min.js"></script>
</head>
<body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function() {// 2. 事件处理on// (1) on可以绑定1个或者多个事件处理程序// $("div").on({//     mouseenter: function() {//         $(this).css("background", "skyblue");//     },//     click: function() {//         $(this).css("background", "purple");//     },//     mouseleave: function() {//         $(this).css("background", "blue");//     }// });$("div").on("mouseenter mouseleave", function() {$(this).toggleClass("current");});// (2) on可以实现事件委托（委派）// $("ul li").click();$("ul").on("click", "li", function() {alert(11);});// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li// (3) on可以给未来动态创建的元素绑定事件// $("ol li").click(function() {//     alert(11);// })$("ol").on("click", "li", function() {alert(11);})var li = $("<li>我是后来创建的</li>");$("ol").append(li);})</script>
</body>
</html>

2.2 事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off() // 解绑p元素所有事件处理程序

$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名

$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style><script src="jquery.min.js"></script><script>$(function() {$("div").on({click: function() {console.log("我点击了");},mouseover: function() {console.log('我鼠标经过了');}});$("ul").on("click", "li", function() {alert(11);});// 1. 事件解绑 off // $("div").off();  // 这个是解除了div身上的所有事件$("div").off("click"); // 这个是解除了div身上的点击事件$("ul").off("click", "li");// 2. one() 但是它只能触发事件一次$("p").one("click", function() {alert(11);})})</script>
</head>
<body><div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><p>我是屁</p>
</body>
</html>

2.3 自动触发事件 trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式

element.trigger("type") // 第二种自动触发模式

element.triggerHandler(type) // 第三种自动触发模式(triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。)

$("p").on("click", function () {alert("hi~");
}); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style><script src="jquery.min.js"></script><script>$(function() {$("div").on("click", function() {alert(11);});// 自动触发事件// 1. 元素.事件()// $("div").click();会触发元素的默认行为// 2. 元素.trigger("事件")// $("div").trigger("click");会触发元素的默认行为$("input").trigger("focus");// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为$("div").triggerHandler("click");$("input").on("focus", function() {$(this).val("你好吗");});// $("input").triggerHandler("focus");});</script>
</head>
<body><div></div><input type="text">
</body>
</html>

3. jQuery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 100px;height: 100px;background-color: pink;}</style><script src="jquery.min.js"></script><script>$(function() {$(document).on("click", function() {console.log("点击了document");})$("div").on("click", function(event) {// console.log(event);console.log("点击了div");event.stopPropagation();})})</script>
</head>
<body><div></div>
</body>
</html>

相关文章：

jQuery事件

1. jQuery事件注册 单个事件注册 语法&#xff1a; element.事件(function(){}) eg&#xff1a;$(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 <!DOCTYP…...

编程日记 2023/5/30 23:00:36

初识SpringCloud

一、软件架构演进 单体架构 垂直架构 分布式架构 SOA架构 微服务架构 二、微服务架构 2.1 微服务理念 "微服务”一词源 于 Martin Fowler的名为 Microservices的博文,可以在他的官方博客上找到http://martinfowler.com/articles/microservices.html微服务是系统架构上…...

编程日记 2023/5/7 1:00:54

安装java配置

目录 安装JDK ​编辑 环境变量配置 3、检验环境变量配置 二、安装tomcat 验证Tomcat配置是否成功 三、安装Mysql 一、安装 二、卸载 四、安装Maven 安装JDK 点击更改将C直接给为F即可。 点击确定后进行安装&#xff0c;安装完以后会提示安装JRE; 检测是否已经安装JDK的…...

编程日记 2023/5/7 0:55:53

KBO的选秀会有哪些规定和流程`棒球7号位

KBO&#xff08;韩国职业棒球联盟&#xff09;的选秀会有以下规定和流程&#xff1a; 1. 选秀对象&#xff1a;KBO的选秀会主要面向年满18岁及以上的高中和大学生&#xff0c;以及海外球员和自由球员。KBO的球队可以在选秀会中挑选所需的球员&#xff0c;每个球队有一定数量的选…...

编程日记 2023/5/31 8:38:01

男子订民宿被毁约5个家庭漂泊街头 房东：住满了，没办法

据媒体报道&#xff0c;5月1日&#xff0c;一位叫做诸先生的消费者和朋友们提前在平台上预订了五一假期前往青岛金沙滩地中海两天的别墅民宿&#xff0c;并支付了房款9600元。 但是当他们到达目的地前一个半小时联系房东时&#xff0c;却发现联系不上人。到达指定地点后&#x…...

编程日记 2023/5/7 0:45:50

Vue快速入门，常用指令，生命周期

Vue常用指令 案例&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"…...

编程日记 2023/5/7 0:40:48

【热门框架】Mybatis-Plus入门介绍看这一篇文章就足够了

MyBatis-Plus 是在 MyBatis 的基础上进行了封装&#xff0c;提供了更加便捷的开发方式&#xff0c;具有简化开发、提高效率等优点。以下是 MyBatis-Plus 的一些特点和用法&#xff1a; 通用 CRUD 操作&#xff1a;MyBatis-Plus 提供了通用的 CRUD 接口&#xff0c;可以直接调用…...

编程日记 2023/5/7 0:35:48

Node【Node.js 20】新特性

文章目录 &#x1f31f;前言&#x1f31f;Node.js 20: 一次重要的升级和改进&#x1f31f;Internationalization API Update&#x1f31f;端口管理器&#x1f31f;字符串处理&#x1f31f; 更好的调试工具&#x1f31f; Crypto模块的更新&#x1f31f;总结&#x1f31f;写在最后…...

编程日记 2023/5/7 0:30:46

前端程序员的职业发展规划与路线——ChatGPT的回答

文章目录 一、前端程序员的职业规划是&#xff1f;回答1&#xff1a; 作为一个前端开发程序员&#xff0c;您的职业发展路线可能如下&#xff1a;回答2&#xff1a;作为前端开发程序员&#xff0c;您的职业发展路线可能如下&#xff1a;回答3&#xff1a; 你的职业发展路线可能…...

编程日记 2023/5/30 23:02:44

AlgoC++第八课：手写BP

目录 手写BP前言1. 数据加载2. 前向传播3. 反向传播总结 手写BP 前言 手写AI推出的全新面向AI算法的C课程 Algo C&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考。 本次课程主要是手写 BP 代码 课程大纲可看下面的思维导图 1. 数据加载 我们首先来实现下MNIST…...

编程日记 2023/5/29 18:23:31

【Java笔试强训 27】

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 一、选择题 二、编程题 &#x1f525; 不用加…...

编程日记 2023/5/29 18:25:40

java紫砂壶交易购物系统 mysql

网络紫砂壶可充通过色彩、图片、说明、设置动画加强了产品了宣传&#xff0c;大大达到了陶瓷业的“色型”要求。实现产品管理方便&#xff0c;起到立竿见影的效果&#xff0c;不用因为更改菜色而重新印刷。只要在后台鼠标轻轻一点&#xff0c;全线马上更新。采用B/S模式&#x…...

编程日记 2023/5/7 0:10:41

7-4 多态练习-计算面积

定义三个类&#xff0c;父类(抽象类)GeometricObject代表几何形状&#xff0c;子类Circle代表圆形&#xff0c;子类Rectangle代表矩形。具体属性和方法如下&#xff1a; 父类 &#xff08;抽象类&#xff09;GeometricObject 属性&#xff1a; private String color; private S…...

编程日记 2023/5/7 0:05:40

很佩服的一个Google大佬，离职了。。

这两天&#xff0c;科技圈又有一个突发的爆款新闻相信不少同学都已经看到了。 那就是75岁的计算机科学家Geoffrey Hinton从谷歌离职了&#xff0c;从而引起了科技界的广泛关注和讨论。 而Hinton自己也证实了这一消息。 提到Geoffrey Hinton这个名字&#xff0c;对于一些了解过…...

编程日记 2023/5/7 0:00:38

【Python习题集1】Python 语言基础知识

python习题 一、实验内容二、实验总结 一、实验内容 1、运用输入输出函数编写程序&#xff0c;将华氏温度转换成摄氏温度。换算公式&#xff1a;C(F-32)*5/9,其中C为摄氏温度&#xff0c;F为华氏温度。 &#xff08;1&#xff09;源代码&#xff1a; ffloat(input(输入华氏温…...

编程日记 2023/5/6 23:55:36

C语言进阶——数据在内存中的存储，你知道吗？

今天我们深度剖析数据在内存中的存储&#xff1a; 重点知识&#xff1a; 1、数据类型详细介绍 2、整形在内存中的存储&#xff1a;原码、反码、补码 3、大小端字节序介绍及判断 4、浮点型在内存中的存储解析 之前我们涉及关于这一部分的知识只是大致的进行讲解&#xff0…...

编程日记 2023/5/6 23:50:35

规则引擎----easy rules

一、规则引擎的作用 将复杂的if else判断剥离出来 二、使用 2.1、引入POM <!--easy rules核心库--><dependency><groupId>org.jeasy</groupId><artifactId>easy-rules-core</artifactId><version>3.3.0</version></depe…...

编程日记 2023/5/30 17:26:41

你手写过一把锁吗？你对轮询缓存怎么看？

当多个线程同时去操作一块内存的数据时如果不做一些限制&#xff0c;极其可能出现数据一致性问题。这时候&#xff0c;我们用一把锁锁住这块数据&#xff0c;持有钥匙者可以进入&#xff0c;不持有者等待钥匙用完再分配。所以在我看来啊&#xff0c;锁的本质就是一个标志位&…...

编程日记 2023/5/6 23:40:33

深入理解 spring-boot-starter-parent

目录 一、前言二、Maven继承三、分析spring-boot-starter-parent四、Maven单继承问题五、不继承spring-boot-starter-parent需要注意的 一、前言 在idea当中创建springboot项目的时候都会继承一个spring-boot-starter-parent作为父类&#xff0c;假如不继承我们的项目就不能使…...

编程日记 2023/5/6 23:35:32

基于SpringBoot的线上日志阅读器

软件特点 部署后能通过浏览器查看线上日志。支持Linux、Windows服务器。采用随机读取的方式&#xff0c;支持大文件的读取。支持实时打印新增的日志&#xff08;类终端&#xff09;。支持日志搜索。 使用手册 基本页面 配置路径 配置日志所在的目录&#xff0c;配置后按回车…...

编程日记 2023/5/6 23:30:31

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/9/8 22:31:18

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/9/9 14:56:55

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/8/30 16:47:37

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/8/25 11:07:48

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/8/15 23:06:41

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/9/14 11:46:41

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/7/6 22:10:07