-
猴子也能学会的jQuery第六期——jQuery事件（中）
📚系列文章—目录🔥
猴子也能学会的jQuery第十期——jQuery元素操作（上）
猴子也能学会的jQuery第十期——jQuery元素操作（下）
猴子也能学会的jQuery第十一期——jQuery尺寸和位置操作
猴子也能学会的jQuery第十二期——jQuery遍历（上）
猴子也能学会的jQuery第十二期——jQuery遍历（中）
猴子也能学会的jQuery第十二期——jQuery遍历（下）
🔥未完待续...
文章目录
📌回顾上期
上期讲了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的事件只会触发一次。
📚持续更新🔥
-
相关阅读:
避坑——Matlab c# 联合编程——Native
怎么查看当前vue项目，要求的node.js版本
佳兆业深陷债务围城，重组方案悬而未定
LeetCode刷题---LRU缓存
QTableWidget 使用方法
观察者模式的运用——消息队列
柔和舒适的瑜伽垫，设计时尚两面可用
Java：ArrayList源码解析
Real-Time Rendering——8.1.4 Rendering with RGB Colors8.1.4用RGB颜色渲染
Multisim14.0仿真应用设计（四）基于LM324的电压跟随器仿真
- 原文地址：https://blog.csdn.net/weixin_53231455/article/details/127839087