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>
相关推荐
程序大视界1 分钟前
【Python系列课程】Pandas(四):数据统计与排序——describe、sort_values、sample
开发语言·python·pandas
ct97813 分钟前
Three.js 性能优化(测量-定位-优化)
javascript·性能优化·three
研☆香14 分钟前
es6新特性功能介绍(一)
前端·ecmascript·es6
KWTXX19 分钟前
使用matlab官网的skills调用claude-待完成
开发语言·matlab
陈_杨25 分钟前
鸿蒙开发-疾阅App阅读训练功能技术解析
前端·javascript
zhangxingchao28 分钟前
AI应用开发八:RAG相关技术总结
前端·人工智能·后端
Cthy_hy35 分钟前
Python算法竞赛:排列组合核心用法
开发语言·python·算法
大圣编程41 分钟前
面向对象深度理解
java·开发语言·算法