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
而另一種綁定方式也就是我們常見的 addEventListener
1 | <button type="button" id="btn">送出</button> |
1 | var btnID = document.getElementById('btn'); |
這種 this
的指向也會是 DOM 本身
因此如果今天有希望該 this
是指向他處的話,那麼就可以搭配上一章節的技巧 bind
來混用,在此並不建議使用 call
,因為函式會被立即執行
1 | var obj = { |
1 | <button type="button" id="btn">送出</button> |
1 | var obj = { |