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>
相关推荐
不爱吃糖的程序媛几秒前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大1 分钟前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT0620 分钟前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
念风零壹28 分钟前
AI 时代的前端技术:从系统编程到 JavaScript/TypeScript
前端·ai
2301_763472461 小时前
C++20概念(Concepts)入门指南
开发语言·c++·算法
光影少年1 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js
小毛驴8501 小时前
Vue 路由示例
前端·javascript·vue.js
TechWJ1 小时前
PyPTO编程范式深度解读:让NPU开发像写Python一样简单
开发语言·python·cann·pypto
lly2024062 小时前
C++ 文件和流
开发语言
发现一只大呆瓜2 小时前
AI流式交互:SSE与WebSocket技术选型
前端·javascript·面试