📚系列文章—目录🔥
未完待续
目录
📌回顾上期
上期讲了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()方法，直接绑定一次性事件。代码和效果如下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax study</title> <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的事件只会触发一次
📚持续更新🔥