今天要來講解 DOM 與 this 的關係，

對於 DOM 的操作有兩種方式，

第一種是直接將方法寫在元素上，

首先我們先準備一個 button

<button>按鈕</button>

之後直接將方法寫在該元素上

<button onclick = 'console.log(this)'>按鈕</button>

此時我們按下 按鈕，會直接觸發 click 事件，該事件為顯示 this，

此時的 this 會將當前綁定元素的所有標籤內容都顯示出來，

當我們只想看綁定的 DOM 時，可以將 log 改成 dir

<button onclick = 'console.dir(this)'>按鈕</button>

我們按下 按鈕 時，此時的 this 會顯示當前綁定的 DOM，

而這時就會是一個單純的物件，其內部能看見有哪些屬性能使用

而第二種方式是使用 addEventListener 的方式來監聽

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
var fn = function() {
    console.dir(this);
    this.style.backgroundColor = 'lightblue';
}

var els = document.querySelectorAll('li');

for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('click', fn);
}
</script>

該範例是使用 querySelectorAll 來選取所有 li 標籤，

我們使用 for 迴圈將每個 li 都補上監聽器，而監聽方法為 click，

因此當我們點擊 li 時，就會執行 fn 這個函式，

該函式會將我們所點擊 li 的背景顏色改變，

並且會在 Console 顯示該元素的物件，

而此時的 this 會指向觸發事件的元素

因此我們可以得知在 DOM 事件監聽中的 this，

會指向原本觸發事件的元素

以上就是今天的內容，感謝觀看！！