技術標籤：前端基礎面試題eventjsjavascriptdomvue

• 嵌入dom

<button onclick="func()">按鈕</button>

• 直接繫結

btn.onclick = function(){}

• 事件監聽

btn.addEventListener('click',function(){})

事件委託

事件委託利用了事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件。所有用到按鈕的事件（多數滑鼠事件和鍵盤事件）都適合採用事件委託技術，
使用事件委託可以節省記憶體。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>鳳梨</li>
</ul>

// good
document.querySelector('ul').onclick = (event) => {
  let target = event.target
  if (target.nodeName === 'LI') {
    console.log(target.innerHTML)
  }
}

// bad
document.querySelectorAll('li').forEach((e) => {
  e.onclick = function() {
    console.log(this.innerHTML)
  }
})