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>
相关推荐
橙露6 分钟前
Python 对接 API:自动化拉取、清洗、入库一站式教程
开发语言·python·自动化
Omigeq13 分钟前
1.4 - 曲线生成轨迹优化算法(以BSpline和ReedsShepp为例) - Python运动规划库教程(Python Motion Planning)
开发语言·人工智能·python·算法·机器人
2301_8084143814 分钟前
自动化测试的实施
开发语言·python
小李子呢021118 分钟前
前端八股Vue(6)---v-if和v-for
前端·javascript·vue.js
程序员buddha21 分钟前
ES6 迭代器与生成器
前端·javascript·es6
波波00731 分钟前
写出稳定C#系统的关键:不可变性思想解析
开发语言·c#·wpf
周周记笔记33 分钟前
初识HTML和CSS(一)
前端·css·html
aq553560034 分钟前
网页开发四剑客:HTML/CSS/JS/PHP全解析
javascript·css·html
程序员buddha42 分钟前
TypeScript详细教程
javascript·ubuntu·typescript
dr_yingli1 小时前
fMRI(3-1)报告(个体化报告)生成器说明
开发语言·matlab