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 分钟前
Vue源码解析-01:从创建到挂载的完整流程
前端·vue.js·源码
Allen Bright6 分钟前
【CSS-5】掌握CSS文本样式:从基础到高级技巧
前端·css
贩卖纯净水.13 分钟前
Webpack常见的插件和模式
前端·webpack·node.js
黎䪽圓17 分钟前
【Java多线程从青铜到王者】单例设计模式(八)
java·开发语言·设计模式
brzhang21 分钟前
Flutter 调用原生代码,看这篇就够了:从零教你搭起通信的桥
前端·后端·架构
程序员小张丶22 分钟前
React Native在HarmonyOS 5.0阅读类应用开发中的实践
javascript·react native·react.js·阅读·harmonyos5.0
EndingCoder22 分钟前
React Native 是什么?为什么学它?
javascript·react native·react.js
袁煦丞22 分钟前
知识管理的六边形战士Trilium Notes:cpolar内网穿透实验室第520个成功挑战
前端·程序员·远程工作
失败又激情的man31 分钟前
python爬虫之数据存储
前端·数据库·python
互联网搬砖老肖32 分钟前
Web 架构之 API 安全防护:防刷、防爬、防泄漏
前端·安全·架构