如果我們想要點擊 li 就能顯示裡面的文字內容，過去都必須在 li 上綁定一個監聽事件，如果像是下方這樣的程式碼點擊 li 永遠都只能顯示第一個 li 的內容就是小美，範例程式碼。
HTML

<ul class="list">
  <li>小美</li>
  <li>小明</li>
</ul>

JS

var list = document.querySelector('.list li');
list.addEventListener('click',checkName,false)
function checkName(e){
    console.log(e.target.textContent);
}

如果想要點擊任何一個元素都能顯示內容可以怎麼寫呢？

綁定父元素

這邊我們可以直接綁定父元素就能做到點擊每個元素都能顯示裡面的文字，程式碼範例如下，附上程式碼範例

var list = document.querySelector('.list');
list.addEventListener('click',checkName,false)
function checkName(e){
    console.log(e.target.textContent);
}

這樣就能達成我們要的效果，不過問題又來了！點擊空白處他竟然把整個元素的內容都顯示出來了點擊 h2 也把文字顯示出來，這邊還要再進行優化讓這個程式只有點擊 LI 才會顯示內容，點擊其他區域是不會有反應的！

監聽事件優化

此時我們能夠在事件函數內放進一個判斷式，就像下方的程式碼一樣，附上程式碼範例

var list = document.querySelector('.list');
list.addEventListener('click',checkName,false)
function checkName(e){
   if(e.target.nodeName !== "LI") {return};
   console.log(e.target.textContent);
}

說明

在程式碼第 4 行加入一個if的判斷是告訴程式當點擊的節點 !== 不等於 "LI" 就 return 這邊是把值返回有中斷的意思，然後再印出只有 LI 才會 console 出來內容文字。

好處

如果按照過去的作法必須在每個 Li 都綁定一個事件，將會造成程式碼過長效能降低，直接綁定父元素再用判斷式的方法，可以簡化程式碼也較有效率，以上就是監聽事件的優化方式。