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>
相关推荐
meilindehuzi_a3 小时前
从零理解并实现 RAG:用 LangChain.js 构建语义检索问答系统
开发语言·javascript·langchain
风流 少年3 小时前
Julia
开发语言·julia
江畔柳前堤3 小时前
GO01-Go 语言与主流编程语言深度对比
开发语言·人工智能·后端·微服务·云原生·golang·go
世界哪有真情4 小时前
拿人类意识卡 AI?等于用 bug 验收正式产品
前端·人工智能·后端
:-)4 小时前
算法-归并排序
java·开发语言·数据结构·算法·排序算法
鱼樱前端4 小时前
别再自己拼凑了!这款 Vue 3.5+ 严肃产品级组件库,把 AI 对话、工作流和复杂数据全包了!
javascript·vue.js·github
Listen·Rain5 小时前
Vue3:setup详解
前端·javascript·vue.js
GIS阵地5 小时前
QgsRasterDataProvider 完整详解(QGIS 3.40.13 C++)
开发语言·c++·qt·开源软件·qgis
Patrick_Wilson6 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
yaoxin5211236 小时前
462. Java 反射 - 获取声明类与封闭类
java·开发语言·python