---
# System prepended metadata

title: 7. e.target 透過點擊確認當下所處在的元素座標
tags: [JavaScript - event 事件]

---

# 7. e.target 透過點擊確認當下所處在的元素座標

### event 內的 object - target

- function(e) 參數的內部小功能 - target，可用來得知滑鼠點擊的當下，是屬於哪一個範圍呢



1. 假設來講，我們這組ＨＴＭＬ裡面有 #header > ul > li > a，有些時候：我會想要知道：我們目前所點擊的是 ul 還是 li? 又是 a 有沒有方法可以幫助我們去做判斷？

```
    <div id="header">
        <ul>
            <li>
                <a href="#">123</a>
            </li>
        </ul>
    </div>
```



---


2. 正題： 

```
// CSS:

ul {
    padding-top: 30px;
}
```

3. el 指定 #header，並起監聽事件為'click'，當我點下#header區域時會產生一個回報座標的資訊： e.target

```
// JavaScript:

var el = document.querySelector('#header');

el.addEventListener('click', function (e) {
    console.log(e.target);
}, false)
```

4. 於下列上中下處個別點擊一次：

![](https://i.imgur.com/xsqa3W2.png)

5. 則會產生以下區域的回報：

![](https://i.imgur.com/mUGGrWv.png)


---

### 藉由事件 object 可以獲取更多的元素內容： console.log(e)


```
var el = document.querySelector('#header');

el.addEventListener('click', function (e) {
    console.log(e);
}, false)

// PointerEvent  將他展開會獲得更多詳細的 **object** 資訊
```

![](https://i.imgur.com/wlJdgLe.png)


### 想更清楚的得到當下點擊的標籤是什麼的話？

- // PointerEvent 裡面有一堆詳盡的資訊，其中一個 nodeName

  就能夠產生回報目前觸發事件的元素是哪一個
  
```
var el = document.querySelector('#header');

el.addEventListener('click', function (e) {
    console.log(e.target.nodeName);
}, false)
```  
  
- 點擊元素周圍就可以獲取最新的標籤資訊


###### tags: `JavaScript - event 事件`
  