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>
相关推荐
__lost1 小时前
MATLAB画出3d的常见复杂有机分子和矿物的分子结构
开发语言·人工智能·matlab·化学·分子结构
夜夜敲码2 小时前
C语言教程(十八):C 语言共用体详解
c语言·开发语言
一城烟雨_2 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
大学生亨亨2 小时前
go语言八股文(五)
开发语言·笔记·golang
raoxiaoya2 小时前
同时安装多个版本的golang
开发语言·后端·golang
树懒的梦想3 小时前
调整vscode的插件安装位置
前端·cursor
cloues break.4 小时前
C++进阶----多态
开发语言·c++
我不会编程5554 小时前
Python Cookbook-6.10 保留对被绑定方法的引用且支持垃圾回收
开发语言·python
低代码布道师4 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
道剑剑非道4 小时前
QT开发技术【qcustomplot 曲线与鼠标十字功能】
开发语言·qt·计算机外设