iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

JavaScript老學徒筆記—馬步篇系列 第 29

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

歐陽克是誰殺的?

這個this是誰?要看兇手是誰而定!

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

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

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

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

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

<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!也就是被事件冒泡影響所觸發的元素。

歐陽克是被楊康殺的!

咦!


上一篇
e.stopPropagation()停止事件冒泡
下一篇
回頭呼喊你的愛情:Callback回呼函式
系列文
JavaScript老學徒筆記—馬步篇35

尚未有邦友留言

立即登入留言