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>
相关推荐
出征2 分钟前
Pnpm的进化进程
前端
屿小夏15 分钟前
openGauss020-openGauss 向量数据库深度解析:从存储到AI的全栈优化
前端
艾斯比的日常17 分钟前
Java 三色标记算法:并发垃圾回收的核心技术解析
java·开发语言·算法
Y***985127 分钟前
【学术会议论文投稿】Spring Boot实战:零基础打造你的Web应用新纪元
前端·spring boot·后端
T***u33332 分钟前
JavaScript在Node.js中的流处理大
开发语言·javascript·node.js
q***333744 分钟前
SpringMVC新版本踩坑[已解决]
android·前端·后端
未来之窗软件服务1 小时前
幽冥大陆(三十四)VUE +node智慧农业电子秤读取——东方仙盟炼气期
开发语言·vue·电子秤·东方仙盟·东方仙盟sdk
Croa-vo1 小时前
TikTok 数据工程师三轮 VO 超详细面经:技术深挖 + 建模推导 + 压力测试全记录
javascript·数据结构·经验分享·算法·面试
亿元程序员1 小时前
做了十年游戏,我才意识到:程序员最该投资的,是一台专业的编程显示器
前端
CoderYanger1 小时前
优选算法-字符串:63.二进制求和
java·开发语言·算法·leetcode·职场和发展·1024程序员节