猴子也能学会的jQuery第六期——jQuery事件（上）-CSDN博客

本文链接：https://blog.csdn.net/weixin_53231455/article/details/127815601

📚系列文章—目录🔥

猴子也能学会的jQuery第一期——什么是jQuery

猴子也能学会的jQuery第二期——引入jQuery

猴子也能学会的jQuery第三期——使用jQuery

猴子也能学会的jQuery第四期——jQuery选择器大全

猴子也能学会的jQuery第五期——jQuery样式操作

猴子也能学会的jQuery第六期——jQuery事件（上）

猴子也能学会的jQuery第六期——jQuery事件（中）

猴子也能学会的jQuery第六期——jQuery事件（下）

猴子也能学会的jQuery第七期——jQuery动画（上）

猴子也能学会的jQuery第七期——jQuery动画（下）

猴子也能学会的jQuery第八期——jQuery属性操作

猴子也能学会的jQuery第九期——jQuery内容操作

猴子也能学会的jQuery第十期——jQuery元素操作（上）

猴子也能学会的jQuery第十期——jQuery元素操作（下）

猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作

猴子也能学会的jQuery第十二期——jQuery遍历（上）

猴子也能学会的jQuery第十二期——jQuery遍历（中）

猴子也能学会的jQuery第十二期——jQuery遍历（下）

猴子也能学会的jQuery——参考手册

🔥未完待续...

文章目录

📌回顾上期

上期讲了jQuery的样式操作

jQuery提供了用于样式的操作有两种，一种是css()方法和设置类样式的方法，前者通过css()方法直接操作元素的样式，如width、height等等，后者通过给元素添加或删除类名来操作元素的样式。

🎯jQuery事件

jQuery提供了一些事件操作的方法，如事件绑定、事件委托和事件解绑等等，可以方便用户在开发中进行事件处理。在触发事件时，可以获取到事件对象，通过事件对象来阻止默认事件行为，或者获取事件发生时的一些信息等。

🧩事件绑定

在jQuery中，实现事件绑定有两种方式，一种是通过事件方法进行绑定，另一种是通过on()方法进行绑定。

🔗通过事件方法绑定事件

在前面的学习中，已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click()、css()等。jQuery的事件和DOM中的事件相比，省略了开头的“on”，如jQuery中的click()对应DOM中的onclick。并且，jQuery的事件方法允许为一个事件绑定多个事件处理函数，只需多次调用事件方法，传入不同的函数即可。
jQuery常见的事件方法
分类方法说明

表单

事件
blur([[data],function]) 当元素失去焦点时触发
focus([[data],function]) 当元素获得焦点时触发
change([[data],function]) 当元素的值发生改变时触发
focusin([data],function) 在父元素上检测子元素获取焦点的情况
focusout([data],function) 在父元素上检测子元素失去焦点的情况
select([[data],function]) 当文本框（包括<input>和<textarea>）中的文本被选中时触发
submit([[data],function]) 当表单提交时触发

键盘

事件
keydown([[data],function]) 键盘按键按下时触发
keypress([[data],function]) 键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发
keyup( [[data],function ]) 键盘按键弹起时触发

鼠标

事件
mouseover([[data],function]) 当鼠标移入对象时触发
mouseout([[data],function]) 在鼠标从元素上离开时触发
click([[data],function]) 当单击元素时触发
dblclick([[data],function]) 当双击元素时触发
mousedown([[data], function]) 当鼠标指针移动到元素上方，并按下鼠标按键时触发
mouseup([[data], function]) 当在元素上放松鼠标按钮时，会被触发
hover([[data], function]) 当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
浏览器事件 scroll([[data],function]) 当滚动条发生变化时触发
resize([[data], function]) 当调整浏览器窗口的大小时会被触发
参数function表示触发事件时执行的处理函数，参数data表示为函数传入的数据，可以使用“事件对象.data”获取。如果调用时省略参数，则表示手动触发事件。

🔗通过on()方法绑定事件
on()方法在匹配元素上绑定一个或多个事件处理函数，语法如下所示。
上述代码中，events表示一个或多个用空格分隔的事件类型，如click；selector表示子元素选择器，fn表示回调函数，即绑定在元素身上的侦听函数。
下面通过代码演示on()方法的使用。
// 一次绑定一个事件
$("div").on("click", function() {
$(this).css("background", "yellow")
});
// 一次绑定多个事件
$("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");
});
上述代码演示了on()方法的3种用法，第1种用法非常简单，和事件方法的方式类似。第2种用法是为on()方法传入了一个对象，对象的属性名表示事件类型，属性值表示对应的事件处理函数。第3种用法是同时为mouseenter、mouseleave事件绑定相同的事件处理函数，实现div元素的current类的切换效果。
🧩jQuery事件方法参考大全

方法描述
bind() 向元素添加事件处理程序
blur() 添加/触发失去焦点事件
change() 添加/触发 change 事件
click() 添加/触发 click 事件
dblclick() 添加/触发 double click 事件
delegate() 向匹配元素的当前或未来的子元素添加处理程序
die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error() 在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace 返回当事件被触发时指定的命名空间
event.pageX 返回相对于文档左边缘的鼠标位置
event.pageY 返回相对于文档上边缘的鼠标位置
event.preventDefault() 阻止事件的默认行为
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation() 阻止其他事件处理程序被调用
event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target 返回哪个 DOM 元素触发事件
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey 事件触发时 META 键是否被按下
focus() 添加/触发 focus 事件
focusin() 添加事件处理程序到 focusin 事件
focusout() 添加事件处理程序到 focusout 事件
hover() 添加两个事件处理程序到 hover 事件
keydown() 添加/触发 keydown 事件
keypress() 添加/触发 keypress 事件
keyup() 添加/触发 keyup 事件
live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown() 添加/触发 mousedown 事件
mouseenter() 添加/触发 mouseenter 事件
mouseleave() 添加/触发 mouseleave 事件
mousemove() 添加/触发 mousemove 事件
mouseout() 添加/触发 mouseout 事件
mouseover() 添加/触发 mouseover 事件
mouseup() 添加/触发 mouseup 事件
off() 移除通过 on() 方法添加的事件处理程序
on() 向元素添加事件处理程序
one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数
ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
select() 添加/触发 select 事件
submit() 添加/触发 submit 事件
toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
unbind() 从被选元素上移除添加的事件处理程序
undelegate() 从现在或未来的被选元素上移除事件处理程序
unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu() 添加事件处理程序到 contextmenu 事件
$.holdReady() 用于暂停或恢复.ready() 事件的执行

📚参考文章资料

黑马jQuery

jQuery 事件方法

分类	方法	说明
表单事件	blur([[data],function])	当元素失去焦点时触发
focus([[data],function])	当元素获得焦点时触发
change([[data],function])	当元素的值发生改变时触发
focusin([data],function)	在父元素上检测子元素获取焦点的情况
focusout([data],function)	在父元素上检测子元素失去焦点的情况
select([[data],function])	当文本框（包括<input>和<textarea>）中的文本被选中时触发
submit([[data],function])	当表单提交时触发
键盘事件	keydown([[data],function])	键盘按键按下时触发
keypress([[data],function])	键盘按键（Shift、Fn、CapsLock等非字符键除外）按下时触发
keyup( [[data],function ])	键盘按键弹起时触发
鼠标事件	mouseover([[data],function])	当鼠标移入对象时触发
mouseout([[data],function])	在鼠标从元素上离开时触发
click([[data],function])	当单击元素时触发
dblclick([[data],function])	当双击元素时触发
mousedown([[data], function])	当鼠标指针移动到元素上方，并按下鼠标按键时触发
mouseup([[data], function])	当在元素上放松鼠标按钮时，会被触发
hover([[data], function])	当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。
浏览器事件	scroll([[data],function])	当滚动条发生变化时触发
resize([[data], function])	当调整浏览器窗口的大小时会被触发

方法	描述
bind()	向元素添加事件处理程序
blur()	添加/触发失去焦点事件
change()	添加/触发 change 事件
click()	添加/触发 click 事件
dblclick()	添加/触发 double click 事件
delegate()	向匹配元素的当前或未来的子元素添加处理程序
die()	在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error()	在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget	在事件冒泡阶段内的当前 DOM 元素
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget	返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace	返回当事件被触发时指定的命名空间
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认行为
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()	阻止其他事件处理程序被调用
event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type	返回哪种事件类型被触发
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey	事件触发时 META 键是否被按下
focus()	添加/触发 focus 事件
focusin()	添加事件处理程序到 focusin 事件
focusout()	添加事件处理程序到 focusout 事件
hover()	添加两个事件处理程序到 hover 事件
keydown()	添加/触发 keydown 事件
keypress()	添加/触发 keypress 事件
keyup()	添加/触发 keyup 事件
live()	在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load()	在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown()	添加/触发 mousedown 事件
mouseenter()	添加/触发 mouseenter 事件
mouseleave()	添加/触发 mouseleave 事件
mousemove()	添加/触发 mousemove 事件
mouseout()	添加/触发 mouseout 事件
mouseover()	添加/触发 mouseover 事件
mouseup()	添加/触发 mouseup 事件
off()	移除通过 on() 方法添加的事件处理程序
on()	向元素添加事件处理程序
one()	向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy()	接受一个已有的函数，并返回一个带特定上下文的新的函数
ready()	规定当 DOM 完全加载时要执行的函数
resize()	添加/触发 resize 事件
scroll()	添加/触发 scroll 事件
select()	添加/触发 select 事件
submit()	添加/触发 submit 事件
toggle()	在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()	触发绑定到被选元素的所有事件
triggerHandler()	触发绑定到被选元素的指定事件上的所有函数
unbind()	从被选元素上移除添加的事件处理程序
undelegate()	从现在或未来的被选元素上移除事件处理程序
unload()	在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu()	添加事件处理程序到 contextmenu 事件
$.holdReady()	用于暂停或恢复.ready() 事件的执行