# 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. 於下列上中下處個別點擊一次：


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


---

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

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

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

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


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

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

就能夠產生回報目前觸發事件的元素是哪一個

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

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

- 點擊元素周圍就可以獲取最新的標籤資訊

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