js中的事件委託

张小饭啊發表於2024-11-29
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');
    }
  }
}

相關文章