jQuery事件

jQuery事件是对JavaScript事件的封装，常用事件分类
基础事件

• 鼠标事件
• 键盘事件
• window事件
• 表单事件
• 绑定事件与移除事件

复合事件

• 鼠标光标悬停
• 鼠标连续点击

jQuery基础事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件
下面是一个使用 Markdown 表格格式展示 jQuery 中常用的鼠标事件的示例：

标红的是常用的,要记住啊

事件	描述
.click()	当单击元素时运行的函数。
.mouseover()	当鼠标指针位于元素上方时运行的函数。与 mouseenter 类似，但会冒泡。
.mouseout()	当鼠标指针离开元素时运行的函数。与 mouseleave 类似，但会冒泡。
mouseenter	当鼠标指针穿过元素时运行的函数。
mouseleave	当鼠标指针离开元素时运行的函数。
hover	当鼠标指针位于元素上方时运行的函数。
mousedown	当鼠标按钮在元素上按下时运行的函数。
mouseup	当鼠标按钮在元素上释放时运行的函数。
mousemove	当鼠标指针在元素上移动时运行的函数。

冒泡小知识：

在前端开发中，事件冒泡是指事件从最内层的元素逐级向外传播到最外层的元素的过程。当在页面上触发某个事件（比如点击一个按钮），该事件会首先在触发的元素上被处理，然后逐级向上冒泡传播到包含该元素的所有祖先元素，直至达到文档根节点。

举个例子，如果在一个按钮上绑定了点击事件，并且该按钮位于一个包含它的 div 元素内，当点击按钮时，点击事件将首先在按钮上触发，然后向上冒泡到 div 元素。如果在 div 元素上也有一个点击事件处理程序，那么该处理程序也会被触发。

在 jQuery 中，大多数事件（如 click、mouseenter、mouseleave等）都会冒泡，除非明确禁止了冒泡。您可以使用 jQuery 的 event.stopPropagation() 方法来阻止事件冒泡，从而防止事件向上传播。

mouseover( ) mouseout（）与mouseenter() mouseleave()的区别

与mouseleave，mouseenter有什么区别
在 jQuery 中，mouseover() 和 mouseout() 方法以及 mouseenter() 和 mouseleave() 方法都用于处理鼠标事件，但它们之间有一些关键区别：

1. mouseover() 和 mouseout()：

   • mouseover() 方法在鼠标指针穿过选定元素或其子元素时触发事件。
   • mouseout() 方法在鼠标指针离开选定元素或其子元素时触发事件。
   • 这两个方法都是冒泡事件，意味着当鼠标指针穿过或离开选定元素时，会触发该元素以及其所有父元素的相应事件。

2. mouseenter() 和 mouseleave()：

   • mouseenter() 方法在鼠标指针进入选定元素时触发事件。
   • mouseleave() 方法在鼠标指针离开选定元素时触发事件。
   • mouseenter() 和 mouseleave() 方法不是冒泡事件，它们只在鼠标指针进入或离开选定元素时触发，不会像 mouseover() 和 mouseout() 那样冒泡到父元素。

因此，主要区别在于事件触发的时机和冒泡行为：

• mouseover() 和 mouseout() 会在鼠标指针穿过或离开元素及其子元素时触发，且会冒泡到父元素。
• mouseenter() 和 mouseleave() 只在鼠标指针进入或离开元素时触发，不会冒泡到父元素。

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件

事件	描述
keydown()	按下键盘上的任意键时触发
keypress()	在按下键盘上的字符键（按住不放）时触发
keyup()	释放键盘上的键时触发

这些事件可用于捕获用户在与页面交互时键盘的各种操作。

window事件

事件	描述
load()	当页面完全加载后触发
resize()	当浏览器窗口大小改变时触发
scroll()	当用户滚动页面时触发
unload()	当用户离开页面时触发
focus()	当元素获得焦点时触发（如输入框）
blur()	当元素失去焦点时触发（如输入框）
beforeunload()	当用户即将离开页面时触发（通常用于提示）

这些事件可用于捕获用户在浏览器窗口操作时的各种事件，从页面加载到用户交互等不同情况下触发相应的动作。

表单事件

事件	描述
submit()	当表单提交时触发
change()	当表单元素的值发生改变时触发
focus()	当表单元素获得焦点时触发
blur()	当表单元素失去焦点时触发
select()	当文本框或文本域中的文本被选中时触发

这些事件可用于捕获用户在表单元素上进行操作时的各种事件，如提交表单、改变输入值、获取焦点等。

绑定事件与移除事件

在jQuery中，on() 方法用于绑定一个或多个事件处理程序到元素，而 off() 方法用于移除通过 on() 方法绑定的一个或多个事件处理程序。

on() 方法

语法：

$(selector).on(event, childSelector, data, handler);

参数：

• event: 规定要执行的事件。
• childSelector (可选): 规定只能添加指定子元素上的事件处理程序。
• data (可选): 规定传递到事件处理程序的额外数据。
• handler: 当事件发生时要执行的函数。

示例：

// 绑定点击事件处理程序
$('#myElement').on('click', function() {// 处理点击事件的代码
});

off() 方法

语法：

$(selector).off(event, childSelector, handler);

参数：

• event (可选): 规定要移除的事件。
• childSelector (可选): 规定只移除指定子元素上的事件处理程序。
• handler (可选): 规定要移除的事件处理程序。

** 示例**：

// 移除点击事件处理程序
$('#myElement').off('click');

复合事件

jQuery的hover()、toggle()和toggleClass(),这些方法是jQuery中常用的函数，可以用于实现各种鼠标交互和样式切换的效果。

jQuery的hover()方法

hover()方法是jQuery中用于处理鼠标悬停事件的函数。它接受两个参数，分别是鼠标指针进入元素时要执行的函数和鼠标指针离开元素时要执行的函数。这个方法常用于实现一些与鼠标交互相关的效果，例如悬停时改变元素的样式或显示隐藏的内容。

使用示例：

$("selector").hover(function() {// 鼠标进入元素时要执行的代码},function