js中的事件委托

事件委托就是使用事件冒泡机制将子元素相关事件绑定到父元素的处理方式。

假设场景：

当我们在开发过程中有toolbar功能开发，toolbar中每个按钮都会触发不同的相关功能（弹窗，左边栏，右边栏，跳转等），如果给每一个按钮绑定click事件，不仅代码量多，而且不方便维护，因此需要使用事件委托，将子元素所有的点击事件委托给父元素，那么只需要父元素绑定click事件，然后点击触发后，再根据不同的点击结果进行。

代码：

// vue组件 toolbar组件
<template>
    <div class="toolbar-right">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</template>

// script 内容
mounted() {
    this.init() //组件初始化调用
  },
  methods: {
    init() {
      // 事件委托
      const dom = document.querySelector('.toolbar-right')
      if (dom) {
        dom.addEventListener('click', (event) => {
          if (event.target.tagName === 'DIV') {
            this.changeBackGround(event.target)
          }
        })
      }
    },
    changeBackGround(div) {
      if (div.classList.contains('backImage')) {
        div.classList.remove('backImage')
      } else {
        div.classList.add('backImage')
      }
    }
  }

// scss样式
.toolbar-right {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  &>div {
    margin: 0em 0.2em;
    &:hover {
      cursor: pointer;
    }
  }
  

  &>:nth-child(1) { // 第一个div背景图
    background-image: url('~@/assets/img/image1.svg');
    @include toolbar-right-mixin;
    &.backImage { // 中添加一个css
        background-image: url('~@/assets/img/image2.svg');
    }
  }
}