JavaScript-事件委托
2021/9/8 20:08:33
本文主要是介绍JavaScript-事件委托,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、什么是事件委托?
把事情托付给比人
说白了就是给父元素注册事件,把处理的代码在父元素的事件中去执行。
事件委托是事件冒泡本身的特性,有利有弊。
事件委托也称为事件代理,在jQuery里称为事件委派。
二、事件委托的作用
节约工作量,提高程序性能。
比如一个ul下面有很多个li,每次点击一个li弹窗一个对话框,如果要是给每个li添加注册事件,太繁琐,而且需要多次访问DOM,就会延长整个网页的交互的中的时间。
如果用事件委托就比较方便,只需要操作一次DOM,这样就可以大大的提高程序的性能。
三、事件委托该如何使用
直接给父元素添加注册时间,利用事件冒泡,当子元素触发事件后,会冒泡到父元素,然后去控制相应的子元素。
该如何去控制子元素?只要使用e.target ,就可以获取到事件源(点击某个子元素,就可以对这个元素进行操作)
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> <style> ul{ margin: 0; padding: 0; list-style-type: none; width: 100%; } ul li{ width: 100px; height: 20px; background-color: royalblue; margin: 2px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul'); ul.onclick = function(e){ e.target.style.backgroundColor = 'yellow'; //事件委托 } </script> </body> </html>
效果如下图:
这篇关于JavaScript-事件委托的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求