jQuery事件
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)
- events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
- selector: 元素的子元素选择器 。
- 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事件注册 单个事件注册 语法： element.事件(function(){}) eg：$(“div”).click(function(){ 事件处理程序 }) 其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 <!DOCTYP…...
初识SpringCloud
一、软件架构演进 单体架构 垂直架构 分布式架构 SOA架构 微服务架构 二、微服务架构 2.1 微服务理念 "微服务”一词源 于 Martin Fowler的名为 Microservices的博文,可以在他的官方博客上找到http://martinfowler.com/articles/microservices.html微服务是系统架构上…...
安装java配置
目录 安装JDK 编辑 环境变量配置 3、检验环境变量配置 二、安装tomcat 验证Tomcat配置是否成功 三、安装Mysql 一、安装 二、卸载 四、安装Maven 安装JDK 点击更改将C直接给为F即可。 点击确定后进行安装，安装完以后会提示安装JRE; 检测是否已经安装JDK的…...
KBO的选秀会有哪些规定和流程`棒球7号位
KBO（韩国职业棒球联盟）的选秀会有以下规定和流程： 1. 选秀对象：KBO的选秀会主要面向年满18岁及以上的高中和大学生，以及海外球员和自由球员。KBO的球队可以在选秀会中挑选所需的球员，每个球队有一定数量的选…...
男子订民宿被毁约5个家庭漂泊街头 房东：住满了，没办法
据媒体报道，5月1日，一位叫做诸先生的消费者和朋友们提前在平台上预订了五一假期前往青岛金沙滩地中海两天的别墅民宿，并支付了房款9600元。 但是当他们到达目的地前一个半小时联系房东时，却发现联系不上人。到达指定地点后&#x…...
Vue快速入门，常用指令，生命周期
Vue常用指令 案例： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"…...
【热门框架】Mybatis-Plus入门介绍看这一篇文章就足够了
MyBatis-Plus 是在 MyBatis 的基础上进行了封装，提供了更加便捷的开发方式，具有简化开发、提高效率等优点。以下是 MyBatis-Plus 的一些特点和用法： 通用 CRUD 操作：MyBatis-Plus 提供了通用的 CRUD 接口，可以直接调用…...
Node【Node.js 20】新特性
文章目录 🌟前言🌟Node.js 20: 一次重要的升级和改进🌟Internationalization API Update🌟端口管理器🌟字符串处理🌟 更好的调试工具🌟 Crypto模块的更新🌟总结🌟写在最后…...
前端程序员的职业发展规划与路线——ChatGPT的回答
文章目录 一、前端程序员的职业规划是？回答1： 作为一个前端开发程序员，您的职业发展路线可能如下：回答2：作为前端开发程序员，您的职业发展路线可能如下：回答3： 你的职业发展路线可能…...
AlgoC++第八课：手写BP
目录 手写BP前言1. 数据加载2. 前向传播3. 反向传播总结 手写BP 前言 手写AI推出的全新面向AI算法的C课程 Algo C，链接。记录下个人学习笔记，仅供自己参考。 本次课程主要是手写 BP 代码 课程大纲可看下面的思维导图 1. 数据加载 我们首先来实现下MNIST…...
【Java笔试强训 27】
🎉🎉🎉点进来你就是我的人了博主主页：🙈🙈🙈戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔🤺🤺🤺 目录 一、选择题 二、编程题 🔥 不用加…...
java紫砂壶交易购物系统 mysql
网络紫砂壶可充通过色彩、图片、说明、设置动画加强了产品了宣传，大大达到了陶瓷业的“色型”要求。实现产品管理方便，起到立竿见影的效果，不用因为更改菜色而重新印刷。只要在后台鼠标轻轻一点，全线马上更新。采用B/S模式&#x…...
7-4 多态练习-计算面积
定义三个类，父类(抽象类)GeometricObject代表几何形状，子类Circle代表圆形，子类Rectangle代表矩形。具体属性和方法如下： 父类 （抽象类）GeometricObject 属性： private String color; private S…...
很佩服的一个Google大佬，离职了。。
这两天，科技圈又有一个突发的爆款新闻相信不少同学都已经看到了。 那就是75岁的计算机科学家Geoffrey Hinton从谷歌离职了，从而引起了科技界的广泛关注和讨论。 而Hinton自己也证实了这一消息。 提到Geoffrey Hinton这个名字，对于一些了解过…...
【Python习题集1】Python 语言基础知识
python习题 一、实验内容二、实验总结 一、实验内容 1、运用输入输出函数编写程序，将华氏温度转换成摄氏温度。换算公式：C(F-32)*5/9,其中C为摄氏温度，F为华氏温度。 （1）源代码： ffloat(input(输入华氏温…...
C语言进阶——数据在内存中的存储，你知道吗？
今天我们深度剖析数据在内存中的存储： 重点知识： 1、数据类型详细介绍 2、整形在内存中的存储：原码、反码、补码 3、大小端字节序介绍及判断 4、浮点型在内存中的存储解析 之前我们涉及关于这一部分的知识只是大致的进行讲解࿰…...
规则引擎----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…...
你手写过一把锁吗？你对轮询缓存怎么看？
当多个线程同时去操作一块内存的数据时如果不做一些限制，极其可能出现数据一致性问题。这时候，我们用一把锁锁住这块数据，持有钥匙者可以进入，不持有者等待钥匙用完再分配。所以在我看来啊，锁的本质就是一个标志位&…...
深入理解 spring-boot-starter-parent
目录 一、前言二、Maven继承三、分析spring-boot-starter-parent四、Maven单继承问题五、不继承spring-boot-starter-parent需要注意的 一、前言 在idea当中创建springboot项目的时候都会继承一个spring-boot-starter-parent作为父类，假如不继承我们的项目就不能使…...
基于SpringBoot的线上日志阅读器
软件特点 部署后能通过浏览器查看线上日志。支持Linux、Windows服务器。采用随机读取的方式，支持大文件的读取。支持实时打印新增的日志（类终端）。支持日志搜索。 使用手册 基本页面 配置路径 配置日志所在的目录，配置后按回车…...
FastJson内存泄漏实战：我是如何用MAT工具定位到IdentityHashMap这个坑的
FastJson内存泄漏深度剖析：从MAT工具实战到IdentityHashMap陷阱破解 凌晨三点，手机突然响起刺耳的告警声——生产环境某核心服务的堆内存使用率突破95%。作为值班工程师，我瞬间清醒过来。这不是普通的OOM，而是一场持续增长的内存…...
Python串口助手开发避坑实录：新手用tkinter+pyserial常遇到的5个典型问题及解决
Python串口助手开发避坑指南：5个典型问题与实战解决方案 第一次用Python开发串口调试工具时，那种既兴奋又忐忑的心情我至今记得。看着自己写的界面能收发数据，成就感爆棚；但随之而来的各种奇怪问题，又让人抓狂。本文将…...
为什么你的MoveIt2 Python API总报错？ROS2环境变量与PYTHONPATH的隐藏陷阱
为什么你的MoveIt2 Python API总报错？ROS2环境变量与PYTHONPATH的隐藏陷阱 当你第一次在ROS2中尝试使用MoveIt2的Python API时，那种"ModuleNotFoundError: No module named moveit"的报错信息可能会让你抓狂。这不是因为你做错了什么ÿ…...
Element React深度解析：企业级React组件库的架构设计与实战应用
Element React深度解析：企业级React组件库的架构设计与实战应用 【免费下载链接】element-react Element UI 项目地址: https://gitcode.com/gh_mirrors/el/element-react Element React是一款基于React框架构建的企业级UI组件库，它为开发者提供了…...
盘点那些提高作物耐盐性的方法（一）
本文内容速览：随着全球气候变化加剧和不合理灌溉的持续影响，土壤次生盐渍化问题日益突出，许多地区的耕地盐碱化程度不断加重。传统手段在应对作物的高盐胁迫时逐渐显现出效果上限——部分作物的耐盐性改良已进入平台期，单纯依靠农…...
智能排错助手：让快马AI分析你的openclaw安装错误并生成解决方案
最近在折腾openclaw这个工具时，遇到了不少安装报错的问题。作为一个经常在各类开发环境中摸爬滚打的程序员，我发现这类开源工具的安装过程往往隐藏着不少坑。不过这次尝试用AI辅助诊断后，整个排错效率提升了不少，这里记录下我的实…...
LiuJuan20260223Zimage参数详解：LoRA rank/alpha设置对人像细节影响深度分析
LiuJuan20260223Zimage参数详解：LoRA rank/alpha设置对人像细节影响深度分析 1. 引言：从一张好看到一张传神 你肯定见过很多AI生成的人像，有的乍一看还行，但总觉得哪里不对劲——可能是眼神呆滞，可能是发丝模糊&…...
中国举办，IEEE会议，录用率39.5%！CCF推荐学术会议（C）截稿提醒
►►►Globecom 2026IEEE Global Communications Conference (GLOBECOM), a flagship IEEE Communications Society event, gathers top experts to drive innovation and advance nearly every aspect of communications technology. Each year, thousands of the most ground…...
3种方法永久保存QQ空间历史说说：GetQzonehistory实战指南
3种方法永久保存QQ空间历史说说：GetQzonehistory实战指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 为什么需要GetQzonehistory：三个真实场景 想象一下&am…...
Qwen2.5-Omni：多模态流式交互的Thinker-Talker架构与TMRoPE技术解析
1. Qwen2.5-Omni的核心设计理念 第一次接触Qwen2.5-Omni时，最让我惊讶的是它处理多模态数据的流畅程度。想象一下，你正在和AI助手讨论一段视频内容，它能同时理解画面中的物体、背景音乐的情绪，还能用自然语音回应你的问题——这就…...