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>
相关推荐
我叫蒙奇3 分钟前
husky 和 lint-staged
前端
我带你来这儿就是为了告诉你我4 分钟前
C++23新特性前瞻
开发语言·c++·算法
kyriewen4 分钟前
JavaScript 继承的七种姿势:从“原型链”到“class”的进化史
前端·javascript·ecmascript 6
穷鱼子酱7 分钟前
ElSelect二次封装组件-实现分页(下拉加载、缓存)、回显
前端
科科睡不着8 分钟前
拆解iOS实况照片📷 - 附React web实现
前端
前端老兵AI9 分钟前
Electron 桌面应用开发入门:前端工程师的跨平台利器
前端·electron
胖子不胖10 分钟前
浅析cubic-bezier
前端
reasonsummer15 分钟前
【办公类-133-02】20260319_学区化展示PPT_02_python(图片合并文件夹、提取同名图片归类文件夹、图片编号、图片GIF)
前端·数据库·powerpoint
jinanwuhuaguo18 分钟前
OpenClaw安全使用实践全景深度指南:从“裸奔龙虾”到“可信数字堡垒”的体系化构建
开发语言·php
2501_9083298519 分钟前
C++安全编程指南
开发语言·c++·算法