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>
相关推荐
m0_699659563 分钟前
QT知识点复习
开发语言·qt
南玖yy6 分钟前
C语言:数组的介绍与使用
c语言·开发语言·算法
米码收割机20 分钟前
【python】tkinter实现音乐播放器(源码+音频文件)【独一无二】
开发语言·python·pygame
yashunan28 分钟前
Web_php_unserialize
android·前端·php
笛柳戏初雪36 分钟前
Python中的函数(下)
开发语言·python
m0_zj36 分钟前
17.[前端开发]Day17-形变-动画-vertical-align
前端·css·chrome·html·html5
美味小鱼1 小时前
初识Cargo:Rust的强大构建工具与包管理器
开发语言·rust·cargo
c-c-developer1 小时前
C++ Primer 标准库类型string
开发语言·c++
山茶花开时。1 小时前
[SAP ABAP] Debug Skill
开发语言·sap·abap
Edward-tan1 小时前
【玩转全栈】--创建一个自己的vue项目
前端·javascript·vue.js