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>
相关推荐
胡八一5 分钟前
使用 Less 实现 PC 和移动端样式适配
前端·css·less
无 证明8 分钟前
【C++】类和对象 (第一弹)
开发语言·c++·算法
加减法原则9 分钟前
字节面试题之如何取消一个正在发送的请求
前端
ZSK612 分钟前
【HTML】分享一个自己写的3*3拼图小游戏
前端·javascript·html
阮瑭雅20 分钟前
Python语言的网络安全
开发语言·后端·golang
淳于韻珊23 分钟前
R语言的跨平台开发
开发语言·后端·golang
Yvette-W1 小时前
【JavaScript】原型链 prototype 和 this 关键字的练习(老虎机)
开发语言·前端·javascript·ecmascript·原型模式
桑榆08061 小时前
Scala数组
开发语言·后端·scala
程序员JerrySUN1 小时前
设计模式 Day 4:观察者模式(Observer Pattern)深度解析
javascript·观察者模式·设计模式
烂蜻蜓1 小时前
HTML5 新元素:革新网页开发体验
前端·html·html5