# 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);


---

- 實際執行下來會有一些小問題：

由於 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 事件`