【Day29】this - DOM

今天要来讲解 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，

会指向原本触发事件的元素

以上就是今天的内容，感谢观看！！