事件委托 - (冒泡) 点击列表元素
2021/8/14 23:10:19
本文主要是介绍事件委托 - (冒泡) 点击列表元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { width: 300px; border: 1px dashed #f0f; margin: 50px auto; font-size: 24px; line-height: 48px; list-style: none; } li { padding-left: 20px; cursor: pointer; } </style> </head> <body> <ul id="list"> <li>刘亦菲</li> <li>杨幂</li> <li>唐嫣</li> <li>赵丽颖</li> <li>刘诗诗</li> </ul> <script> // 让每个 li 被点击后,自己添加特殊的背景色,而其他兄弟不添加 // 以前的思路:获取所有的 li 标签元素,批量添加事件 // 事件委托:可以将一些子级的公共类型的事件委托给他们的父级添加,在父级内部想办法找到真正触发事件的最底层的事件源 // 获取元素 var list = document.getElementById("list"); var lis = list.children; // 给 ul 添加点击事件 list.onclick = function (e) { // 在内部要想办法找到真正触发事件的 li // 借用事件函数内部的一个参数 e,e 是事件对象 // 只要触发事件,函数内部都可以得到一个事件对象,对象中存储了关于事件的一系列数据 // e.target 属性记录的就是真正触发事件的事件源 // 排除其他 for (var i = 0 ; i < lis.length ; i++) { lis[i].style.backgroundColor = ""; } e.target.style.backgroundColor = "pink"; }; </script> </body> </html>
这篇关于事件委托 - (冒泡) 点击列表元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南