猴子也能学会的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第十二期——jQuery遍历（下）

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

🔥未完待续...

文章目录

📚系列文章—目录🔥

📌回顾上期

🎯jQuery事件

🧩事件委派

🧩事件解绑

🧩补充：one()方法
📌回顾上期

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

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

🧩事件委派
- 事件委派是指，把原本要给子元素绑定的事件，绑定到父元素上，这就表示把子元素的事件委派给父元素。由于事件有冒泡机制，当一个元素触发事件时，可以区分发生事件的是父元素还是子元素。
- 事件委派是通过on()方法来实现的，下面通过代码进行演示。
  上述代码中，click事件是绑定在父元素ul上的，但触发事件的是第1个li子元素，当子元素触发事件后，就会通过事件冒泡，执行父元素ul的事件处理程序了。
  
  需要注意的是，在事件委派的情况下，事件处理函数中的this表示触发事件的元素，即上述代码中的第1个li元素，并不是委派事件的ul元素。
- 事件委派的优势在于，可以为未来动态创建的元素绑定事件。其原理是将事件委派给父元素后，在父元素中动态创建的子元素也会拥有事件。示例代码如下。上述代码中，第5~7行通过事件委派的方式为ul中的li元素绑定了单击事件，在执行第8~9行代码添加li元素后，新添加的li元素也可以触发单击事件。
- 小提示：在早期版本的jQuery中，还有bind()、live()和delegate()等方法也可以实现事件绑定或事件委派，但在最新版本中已经被废弃，建议使用on()替代它们。
🧩事件解绑
- 事件解绑使用off()方法，该方法可以移除通过on()方法添加的事件处理程序，具体语法如下所示。
  
  $('p').off(); // 解除p元素上的所有事件处理程序 $('p').off('click'); // 解绑p元素上的单击事件 $('ul').off('click', 'li'); // 解绑事件委派
  
  上述代码中，off()方法接收的第1个参数为事件类型，表示解除单击事件，如果接收的参数为空，表示解除掉所有事件处理程序。第2个参数表示解绑事件委托。
- 下面通过代码演示如何使用off()方法解绑事件。上述代码中，第3~10行通过on()方法为div元素分别绑定单击事件和鼠标移入事件，第12行解除div元素的所有事件。
🧩补充：one()方法

如果你想让一个元素的事件只触发一次，为元素绑定事件后再解除绑定会比较麻烦，因此使用one()方法，直接绑定一次性事件。代码和效果如下。
```
html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>ajax studytitle>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
head>
<style>
  .box1{
    width: 200px;
    height: 200px;
    background-color: green;
  }
style>
 
<body>
  <div class="box1">第一个div标签div>
 
body>
<script>
  //jquery 
$("div").one("click", function(){
    alert("被点击了")
    $(this).toggleClass("box1");
 
})
 
script>
 
html>
```
- 效果是点击这个div然后弹出一条消息，然后删除box1这个类，因此绿色背景消失。
- div元素的click的事件只会触发一次。
📚持续更新🔥
相关阅读:
使用boost::geometry::union_ 合并边界（内、外）：方案二
 软件过程与建模学习之：Quality Management
Keepalived+HAProxy基于ACL实现单IP多域名负载功能
 Himall商城Web帮助类获得http请求数据
 相关性质和条件变量-ReentrantLock详解(2)-AQS-并发编程(Java)
深度学习5 神经网络
 基于springboot+jpa+camunda实现简单的请假审批流程
 多线程与高并发基础
 提高使用VS Code工作效率的技巧
 python调用函数详解
原文地址：https://blog.csdn.net/weixin_53231455/article/details/127839087

📚系列文章—目录🔥

📌回顾上期

🎯jQuery事件

🧩事件委派

🧩事件解绑

🧩补充：one()方法