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>
相关推荐
liweisum2 分钟前
AI驱动 WEB UI自动化---前端技术分享
前端·javascript·typescript
该用户已不存在2 分钟前
2025 年,Python工具别只知道Pycharm了
前端·后端·python
每天开心8 分钟前
噜噜旅游App(4)——搜索页面开发教程:热门推荐与关键词搜索模块
前端·前端框架
前端赵哈哈9 分钟前
🚀 从 Windi CSS 迁移到 Tailwind CSS v4 完整实践指南
前端·css·vue.js
Sammyyyyy20 分钟前
Node.js 是怎么一步步撼动PHP地位的
开发语言·node.js·php
ybr20 分钟前
基于react-router-dom, view transition 实现路由切换过渡动效
前端
饮茶三千21 分钟前
FreeMarker在保险电子保单/保函模板中的应用
前端·后端
前端的日常23 分钟前
提升开发效率,VSCode 中的两大神器
前端
掘金0124 分钟前
vue父子组件处理异步操作
前端
前端拿破轮24 分钟前
腾讯面试官:手写一个节流防抖看看
前端·javascript·面试