---
# System prepended metadata

title: 【自學筆記】關於JavaScipt的function(e)
tags: [javascript, front-end]

---

###### tags: `javascript`, `front-end`
# 【自學筆記】關於JavaScipt的function(e)

我們常常會使用this，取得按鈕本身的實體，像這樣

```htmlembedded=
<button id="btn">一個按鈕</button>
```
```javascript=
var btn = document.getElementById('btn')

btn.addEventListener('click', function(){
    console.log(this)
})
```
結果就會是 ![](https://i.imgur.com/xxt3Ghc.jpg)

---

除了`this`之外，還有另一個方法，那就是這篇要說明的==event==了(也可以直接寫e)
```javascript=
btn.addEventListener('click', function(e){
    console.log(e.target)
})
```
結果一樣是 ![](https://i.imgur.com/xxt3Ghc.jpg)

那麼這個e到底是個甚麼東西咧:thinking_face:

咱先退回去把e印出來看看

```javascript=
btn.addEventListener('click', function(e){
    console.log(e)
})
```
結果會看到他是一個PointerEvent
![](https://i.imgur.com/3hy1yP9.jpg)


PointerEvent其實就是整合了過去滑鼠(MouseEvent)、觸控(TouchEvent)以及筆型裝置操作時會有的內容，有興趣自己去查差別，這裡不多贅述

![](https://i.imgur.com/jqBFOEg.jpg)

說回PointerEvent的內容，可以看到非常多的項目
這些其實就是當你滑鼠點下去後，所有關於這個click相關的內容都含在這個e的裡面 

...
...未完待補