JavaScript事件對象屬性e.target和this的區別

前言：

Event對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件發生后，跟事件相關的一系列信息數據的集合都放到這個對象里面，這個對象就是事件對象event，它有很多屬性和方法。
比如：

1. 誰綁定了這個事件。
2. 鼠標觸發事件的話，會得到鼠標的相關信息，如鼠標位置。
3. 鍵盤觸發事件的話，會得到鍵盤的相關信息，如按了哪個鍵。
   其中事件對象屬性e.target，它和this的指向有所不同。

案例：

HTML:

<div>div
    <span>span</span>
</div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-color: red;
}

span {
    display: block;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

預覽：

JS:

var div = document.querySelector('div');
div.addEventListener('click', function(e) {
    console.log(this);  // 給div綁定了事件,那么this就指向div
    console.log(e.target);  // e.target指向點擊的那個對象
})

實現結果：

點擊div：

this返回div標簽，e.target返回div標簽

---

點擊span：

this返回div標簽，e.target返回span標簽

分析：

1. 因為div綁定了點擊事件，那么this返回的都是div；
2. 點擊div，e.target返回div；點擊span，e.target返回span。

總結：

1. this返回的是綁定事件的對象（元素）；e.target返回的是觸發事件的對象（元素）。
2. 簡單來說，this：哪個元素綁定了這個點擊事件，就返回哪個元素；e.target：點擊了哪個元素，就返回哪個元素。