讓 click 和 enter 觸發同個事件

這招還不錯。

簡述

在遇到表單的時候會希望除了「按下按鈕」以外還能支援「按下 Enter 鍵」。

但麻煩的地方在於一個必須綁 click 事件，一個必須綁 keypress 事件，並且要判斷使用者按下的是 Enter 才做處理，所以你可能會這樣寫：

<div>
  <input type="text">
  <button>send</button>
</div>

// 輸入框
document
  .querySelector('[type=text]')
  .addEventListener('keydown', handlerEnter)
// 按鈕
document
  .querySelector('button')
  .addEventListener('click', handlerClick)

// click 的 handler
function handlerClick() {
  console.log('button click!')
}
// enter 的 handler
function handlerEnter(e) {
  if (e.key === 'Enter') {
    console.log('press enter!')
  }
}

但通常兩個要做的事情都是一樣的，只差在 keypress 要判斷是不是 Enter 的流程，導致這兩個 function 沒辦法寫在一起，這很讓人傷腦筋。

讓你的腦袋轉個方向

沒錯，可以轉個方向來思考，為什麼不讓「按下 enter 時自動執行 click 這個動作」就好？

所以其實能改成這樣：

// 輸入框
document
  .querySelector('[type=text]')
  .addEventListener('keydown', (e) => {
  // 判斷是不是 Enter
  if (e.key === 'Enter') {
    // 是的話就把按鈕 click
    document.querySelector('button').click()
  }
})
// 按鈕
document
  .querySelector('button')
  .addEventListener('click', handler)
// 現在只要一個 handler 就夠了
function handler() {
  console.log('click!')
}