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>
相关推荐
烬头88218 分钟前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas13611 分钟前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠20 分钟前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
2601_9498333924 分钟前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
lly20240624 分钟前
C 语言中的结构体
开发语言
JAVA+C语言42 分钟前
如何优化 Java 多主机通信的性能?
java·开发语言·php
珑墨1 小时前
【Turbo】使用介绍
前端
军军君011 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
青岑CTF2 小时前
攻防世界-Ics-05-胎教版wp
开发语言·安全·web安全·网络安全·php
Li emily2 小时前
如何通过外汇API平台快速实现实时数据接入?
开发语言·python·api·fastapi·美股