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

是 Ray 不是 Array

I'm a Software Engineer, and blogger.

F2E Engineer Coffee Powered Bug Hunter 900+ Articles

前言

接下來講講 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>`

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>`

var obj = {
  name: 'Ray'
}
var btnID = document.getElementById('btn');

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

參考文獻

JavaScript 核心篇

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

前言

DOM

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

DOM

參考文獻

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

JavaScript 核心觀念(46)-函式以及 This 的運作-函式以及 This 的運作 - 課後練習

JavaScript 核心觀念(45)-函式以及 This 的運作-總結：函式的常見陷阱題

JavaScript 核心觀念(44)-函式以及 This 的運作-this 課後練習

JavaScript 核心觀念(42)-函式以及 This 的運作-this：call, apply, bind 與 嚴謹模式

分享這篇文章

留言

JavaScript 核心觀念(42)-函式以及 This 的運作-this：call, apply, bind 與嚴謹模式