寫鍵盤事件前，來回顧一下 remove event handler 的機制

remove event handler 的重要性

對某個動作（滑鼠/鍵盤事件）新增 event，用 addEventListener 就可以，不過為什麼要特別做移除的動作呢？
原因是

• 當註冊事件ㄧ多，用不到的 registered event 會影響效能
• 可能導致 memory leak 的情況

跟 addEventListener 很像， remove evt handler 的寫法為
typeOfEvent 為動作的種類（mouseOver / click / keyUp ..）
listener 為要被移除的 function
useCapture 為選填項目，預設 false

target.removeEventListener('typeOfEvent' , listener , useCapture )

常用的場合是在執行某個 listener 結束前，將該 listener function 移除掉

const target = document.getElementById('target');

target.addEventListener( 'click' , clickHandler );

function clickHandler(){
    // do something..
    ...
    target.removeEventListener( 'click' , clickHandler );
}

移除會需要functionName，所以如果對 addEventListener 寫匿名函式(anonymous function)就會導致移除困難，所以盡可能避免這樣的做法

target.addEventListener( 'click' , ()=>{
    // do something..
} );

參考資料

removeEventListener
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
https://eloquentjavascript.net/15_event.html
about memory leak
https://www.ditdot.hr/en/causes-of-memory-leaks-in-javascript-and-how-to-avoid-them
https://blog.logrocket.com/escape-memory-leaks-javascript/