JS核心-(41)-函式以及This的運作-this : DOM

前言

講解對於 HTML 的 DOM 元素上的操作的時候， this 的指向會有什麼不同

直接把方法寫在元素上面

這樣的寫法會直接將 this 綁定在該 DOM 的元素上

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

<button onclick = "console.log(this)">這是一個按鈕</button>

這樣的好處就是方便我們在開發的時候，會更為輕鬆，但是這樣的方式會直接將該 DOM 元素的標籤呈現出來，所以比較建議是

使用 console.dir ，透過這樣的方式顯示的話就會是一個單純的物件，也可以透過這個物件我們知道它詳細的內容是什麼

---

針對監聽器的綁定

我們來看一下下面的例子

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

<button onclick = "console.dir(this)">這是一個按鈕</button>

<script>

  var fn = function () {
    console.dir(this);
    this.style.backgroundColor = 'orange';
  }
  var els = document.querelectorAll('li');

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

</script>

我們先取得每個 Li 的 DOM 元素，並且利用 for 迴圈綁定 click 的監聽事件，只要這些 Li 被點擊的時候，就會

觸發 fn 的 function ，並將 this 綁定在點擊的 Li 上

以上是這個章節就是說明綁定 this 到觸發該 function 的元素上，進行開發上的操作。