# 在監聽事件中的 this/ event

## 隱藏在 Handler 中的 "event"
https://ithelp.ithome.com.tw/articles/10192015

> 當監聽的事件發生時，瀏覽器會去執行我們透過 addEventListener() 註冊的 Event Handler (EventListener) ，也就是我們所指定的 function。
>
> 這個時候，EventListener 會去建立一個「事件物件」 (Event Object)，裡面包含了所有與這個事件有關的屬性，並且以「參數」的形式傳給我們的 Event Handler

var btn = document.getElementById('btn');

// e (Event Object)
btn.addEventListener('click', function(e){
  console.log(e);
});

## 在事件中找回「自己」this
在 Event Handler 的 function 裡頭，若是想要對「觸發事件的元素」做某些事時，可以用 this

> this 代表的會是「觸發事件的目標

console.log('target', e.target)
// 觸發事件的元素
console.log('currentTarget', e.currentTarget;
// 觸發事件的目標
console.log('this', this)
// 觸發事件的目標

:::success
換言之，`e.target` 其實是「觸發事件的元素」，而 `this` 指的是「觸發事件的目標」元素，也就是 `event.currentTarget`。

當然，如果在不考慮事件傳遞的情況下，`this` 實質上就等同於 `e.target` 。
:::

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}