深入了解event.target屬性

一、什麼是event.target

在前端開發中，事件處理函數是必不可少的。當用戶與頁面交互時，如點擊、滑動或鍵盤輸入，頁面上的元素需要對這些事件進行響應。

當事件被觸發時，事件處理函數會被調用，並傳遞一個event對象。其中，event.target屬性代表了觸發事件的源頭元素，也就是用戶操作的那個元素。

例如，當用戶點擊頁面上的一個按鈕時，該按鈕就會觸發事件，並成為event.target對象。這個對象包含了該元素的各種屬性和方法，可以用來進行相關操作，如修改類名、顏色或屬性值等。

//示例代碼1
const button = document.querySelector('.my-button');
button.addEventListener('click', function(event) {
  console.log(event.target); //返回button元素
});

二、event.target與this的區別

在事件處理函數中，this關鍵字指向的是綁定事件的元素。而event.target則指向觸發事件的元素。它們的區別可能會讓一些開發者感到困惑，因為在某些情況下它們可能指向相同的元素。

舉個例子，當我們向一個父元素中添加了多個子元素，每個子元素都綁定了同一個事件處理函數。當任何一個子元素觸發了事件時，該處理函數會被調用。同時，this指向的是該父元素，而event.target指向的則是觸發事件的那個子元素。

//示例代碼2
const container = document.querySelector('.my-container');
container.addEventListener('click', function(event) {
  console.log(event.target); //返回點擊的子元素
  console.log(this); //返回包含子元素的父元素
});

三、防止事件冒泡

事件冒泡是指按照從子元素到父元素的順序依次觸發相同類型的事件。如果不加以控制，事件處理函數可能會被觸發多次，從而影響性能。可以使用event.stopPropagation()方法來防止事件冒泡。

//示例代碼3
const container = document.querySelector('.my-container');
container.addEventListener('click', function(event) {
  console.log(event.target); //返回點擊的子元素
  event.stopPropagation(); //阻止事件冒泡
});

const button = document.querySelector('.my-button');
button.addEventListener('click', function(event) {
  console.log(event.target); //返回button元素
});

四、動態綁定事件

在一些特定的場景中，開發者可能需要在運行時動態地為元素綁定事件，而不是在HTML代碼中定義。可以使用event.target.addEventListener()方法來實現這一點。

//示例代碼4
const container = document.querySelector('.my-container');
container.addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') { //只為按鈕綁定事件
    event.target.addEventListener('click', function() {
      console.log('hello world');
    });
  }
});

五、總結

event.target屬性是前端開發中非常重要的一個概念。通過它，可以獲取到用戶操作的元素並對其進行相應的操作。同時，它與this關鍵字有一定的區別，在使用時需要注意。如果需要防止事件冒泡，可以使用event.stopPropagation()方法。當需要動態綁定事件時，可以使用event.target.addEventListener()方法。細緻而完整地了解event.target屬性，將為前端開發提供更多的思路和技巧。