JavaScript 核心觀念(43)-函式以及 This 的運作-this:DOM

前言

接下來講講 this 跟 DOM 的關係。

DOM

接下來將會說明 this 在 DOM 操作上有什麼樣的差異,其實這部分也是一個很大的雷點。

首先先看一下範例程式碼

1
<button type="button">送出</button>

首先通常監聽行為我們兩種寫法,一種是直接寫在 HTML 上的

1
<button type="button" onclick="console.log(this)">送出</button>

而當你在 HTML 上面點這個元素時,其實會指向該 HTML

DOM

而另一種綁定方式也就是我們常見的 addEventListener

1
<button type="button" id="btn">送出</button>
1
2
3
4
var btnID = document.getElementById('btn');
btnID.addEventListener('click', function() {
console.log(this);
})

這種 this 的指向也會是 DOM 本身

因此如果今天有希望該 this 是指向他處的話,那麼就可以搭配上一章節的技巧 bind 來混用,在此並不建議使用 call,因為函式會被立即執行

1
2
3
var obj = {
name: 'Ray'
}
1
<button type="button" id="btn">送出</button>
1
2
3
4
5
6
7
8
9
var obj = {
name: 'Ray'
}
var btnID = document.getElementById('btn');

function fn() {
console.log(this);
}
btnID.addEventListener('click', fn.bind(obj));

參考文獻

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ