当前位置: 首页 > news >正文

JavaScript(20)——事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点:减少注册次数,提高程序性能

原理:利用事件冒泡的特点。

给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素上,从而触发父元素事件。

真正触发的元素:e.target.tagName

<body><ul><li>111</li><li>222</li><li>333</li><li>444</li><p>我不变红</p></ul><script>//获取父元素const t = document.querySelector('ul')t.addEventListener('click', function (e) {//console.log(e.target)  点击的对象// e.target.style.color = 'red' //点击后变红if (e.target.tagName === 'LI') {e.target.style.color = 'red'}})</script>
</body>

http://www.lryc.cn/news/410675.html

相关文章:

  • Linux系统安装opencv
  • nginx反向代理+nginx黑白名单+nginx负载均衡+平滑升级+配置jdk环境-7.30
  • C# Unity 面向对象补全计划 之 访问修饰符
  • JAVA多线程设计模式 (多线程程序的衡量标准)
  • 消息队列使用
  • Windows 10+Visual Studio2019 Opencv-C++安装配置
  • 百易云资产管理运营系统 comfileup.php 文件上传致RCE漏洞复现(XVE-2024-18154)
  • 【学习笔记】Redis学习笔记——第17章 集群
  • Vue - CSS基础学习
  • python setup.py install
  • 论文解读:DiAD之SG网络
  • Prometheus+Grafana 监控平台实践-搭建常用服务监控告警
  • leaflet加载天地图:卫星底图(影响地图) 和 路网底图(矢量地图)【webgis】
  • 微软蓝屏事件:全球网络安全与系统稳定性的警示
  • 【51单片机仿真】基于51单片机设计的整数/小数计算器系统仿真源码文档——文末资料下载
  • ubuntu安装dockergitlab
  • 自定义视图提示:提升Laravel用户体验的秘诀
  • 关于黑马Ajax项目的笔记
  • Java面试八股之JDK 动态代理和 CGLIB 动态代理的区别
  • 验证码邮件接口测试指南?接口的优化策略?
  • 基于Java的智能停车场管理系统
  • 前后端分离开发遵循接口规范-YAPI
  • 把本地的项目代码初始化到git仓库
  • 白杨SEO:公众号如何找选题?如何利用ai工具写公众号?公众号变现方式有哪些?22个公众号营销常见问题解答大全!
  • 零基础学习深度学习以及模块缝合总结
  • XXE-lab-master靶场:PHP_xxe
  • 视图,存储过程和触发器
  • sqli-labs(6-10)关通关讲解
  • 【解决方法】git clone出现 curl 56 OpenSSL SSL_read: Connection was reset, errno 10054
  • 机械拆装-基于Unity-本地数据持久化