---
# System prepended metadata

title: 14. 優化'click' event 作法：
tags: [JavaScript - event 事件]

---

# 14. 優化'click' event 作法：


### 'click' 事件的優化範例：

- 以下面範例為案例：

1. 有三個 li，我們目的是點擊 li，讓 em 跑出 li 的內容：

```
    <ul class="list">
        <h2>CPBL隊伍：</h2>
        <li style="padding-bottom:5px;">富邦悍將</li>
        <li style="padding-bottom:5px;">中信兄弟</li>
        <li style="padding-bottom:5px;">樂天桃猿</li>
    </ul>
    <p>
        顯示結果：<em id="feedback"></em>
    </p>
```

2. 再來看看 JS 的內容：

```
var el = document.querySelector('.list');

function checkName(e) {
    console.log(e.target);
}

el.addEventListener('click', checkName, false);

```  

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




---



- 實際執行下來會有一些小問題：
  
  由於 h2 也是在「受到監聽」 範圍內的 tag，所以 click 也會跑出 h2，但我希望只有 "LI" 會 feedback 我應該如何做？
   
   
### 優化：

```
var el = document.querySelector('.list');

function checkName(e) {
    if (e.target.nodeName != "LI") { return };
    // 如果點擊內容非 "LI" return 不帶出任何內容即是空值
    console.log(e.target);
}

el.addEventListener('click', checkName, false);
```

3.  如此一來，不管怎樣點擊h2 它都無法被 console.log() 帶出內容



---


### 完成作業：

```
var el = document.querySelector('.list');

function checkName(e) {
    if (e.target.nodeName != "LI") { return };
    // 如果點擊內容非 "LI" return 不帶出任何內容即是空值
    var area = document.querySelector('#feedback');
    var targetvalue = e.target.textContent;
    area.style.color = "blue";
    // 改變 em 的屬性 color 文字顏色 = 藍色; 
    area.textContent = targetvalue;
}

el.addEventListener('click', checkName, false);
```


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