事件委托如何获取子元素

累了要吃肉丶

已于 2022-02-18 15:02:08 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： javascript 前端 vue.js

于 2022-02-18 14:51:35 首次发布

本文链接：https://blog.csdn.net/qq_43610311/article/details/123003500

前端学习专栏收录该内容

41 篇文章

订阅专栏

本文探讨了JavaScript中事件委托的使用，通过一个右侧面板年、月、日选择的示例，展示了如何利用事件冒泡来实现点击事件的处理。在事件处理函数中，我们检查了被点击元素的类名，以确定是年、月还是日的选择，并据此更新状态。这种方法提高了代码效率，减少了事件监听器的数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div slot="rightTab" class="rightTab" @click="rightClick($event)">
   <span class="ydqxBtn one" :class="{ activeBtn: activeBtn == 1 }"
   >年</span>
   <span class="fenge">|</span>
   <span class="ydqxBtn two" :class="{ activeBtn: activeBtn == 2 }"
   >月</span>
   <span class="fenge">|</span>
   <spanclass="ydqxBtn three" :class="{ activeBtn: activeBtn == 3 }"
   >日</span>
 </div>

      console.log(e.target.innerHTML)//目标的文本
      console.log(e.target.tagName)//目标的标签名
      console.log(e.target.nodeName)//目标的节点名
      console.log(e.target.id)//目标的id（标签不设置为空）
      console.log(e.target.className)//目标的类名（标签不设置为空）)
      console.log(e.target.childNode)//目标的子节点
      console.log(e.target.parentNode)//目标的父节点

事件委托所有子元素都会触发点击事件，所以给需要监听的元素设置一个相同的类名或者相同的标签，先判断点击的元素是否为需要触发事件的标签。然后再进行相应的判断

methods: {
    rightClick(e) {
      let className = e.target.className;
      if (className.indexOf("ydqxBtn") > -1) {
        console.log(className);
        let flag =
          className.indexOf("one") > -1
            ? 1
            : className.indexOf("two") > -1
            ? 2
            : 3;
        this.activeBtn = flag;
      }
    },
  },