Day29:事件監聽的 this :「這個」到底是哪一個?-this

歐陽克是誰殺的?

這個 this 是誰？要看兇手是誰而定！

前面有提到，這個 e 是在當事件發生時，事件處理器自動建立的「事件物件」，裡面紀錄了跟事件有關係的資訊，並把這個e當參數傳入事件發生時設定要執行的函式。

如果我們想要印出，滑鼠所點擊的元素的標籤名稱，可以這樣寫：

element.addEventListener('click', function (e){
	console.log(e.target.tagName);
},false)

「 e.target 」就是「觸發事件的元素」。在這種狀況下，我們可以使用「 this 」來取代 「 e.target 」。

當我們選取 DOM 元素來做事件監聽的時候， this 會指向那個DOM元素。以下這段程式，滑鼠點擊 <li> 之後，字體會變成紅色的。

<div id="sword">
  <ul class="fiveHero">
    <li class="firstHero">1 東邪</li>
    <li class="secondHero">2 西毒</li>
    <li class="thirdHero">3 南帝</li>
    <li class="fifthHero">4 北丐</li>
    <li class="lastHero">5 中神通</li>
  </ul>
</div>

var elements = document.getElementsByTagName('li');

function changeColor(e) {
	console.log(e.target);
  e.target.style.color = 'red';
}

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', changeColor, false);
}

我們用「 this 」來取代「 e.target 」，跟上面那個JavaScript 程式區塊呈現一樣的效果。

var elements = document.getElementsByTagName('li');
//沒有用e當function的參數
function changeColor() {
	console.log(this);
  this.style.color = 'red';
}

for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', changeColor, false);
}

但是當「事件監聽」是被其他元素的事件所觸發的時候，「 this 」就不等於「 e.target 」了。來看看下面的例子：

<div class="outer">
    <div class="inner"></div>
</div>

var inner = document.querySelector('.inner')
var outer =document.querySelector('.outer');
inner.addEventListener('click', function(e) {
  console.log(e.target.className,1)
  console.log(this.className,1)
},false)

outer.addEventListener('click', function(e){
    console.log(e.target.className,2)
    console.log(this.className,2)
},false)

點擊黃色區塊後，出來的結果是：

"inner" 1  //黃色區塊所觸發的事件,e.targer = 觸發事件的元素
"inner" 1  //黃色區塊所觸發的事件,e.target = this = 觸發事件的元素
"inner" 2  //黃色區塊事件冒泡所觸發的事件 , e.target = 觸發事件的元素
"outer" 2  //黃色區塊事件冒泡觸發紅色區塊的事件， this = 被事件冒泡所觸發的元素，而非e.target

在這個例子中， outer.addEventListener() 是被 inner.addEventListener() 的事件冒泡所觸發， e.target 為觸發事件的元素，真正的凶手當然就是 inner 。而 outer.addEventListener() 的 this 卻是指向 outer ，它是被事件冒泡所觸發的元素，也就是 e.currentTarget ，也就是被害者，被 inner 害的。

在沒有事件冒泡影響的情況下， e.target = this ，兇手與被害者是同一人，也就是自作自受。

當元素的事件是被事件冒泡所觸發的時候：

e.target 是兇手，郎是伊抬ㄟ！

e.currentTarget 就是被害者！ this 就是 e.currentTarget ！也就是被事件冒泡影響所觸發的元素。

歐陽克是被楊康殺的！

咦！