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

jQuery事件

news 2025/7/3 19:11:37

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/7/1 22:06:41

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/6/28 17:42:20

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/6/29 11:32:03

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/6/26 10:09:23

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/6/20 22:13:31

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/6/25 7:35:04

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/7/1 2:38:10

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/7/2 16:17:57

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

编程新知 2025/6/21 22:57:18

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

编程新知 2025/6/10 21:19:52