onKeyUp, onKeyDown 언제 사용하는게 좋을까?(feat ContentEditable)

onKeyDown, onKeyUp

onKeyDown은 키를 누르고 있을 때, onKeyUp은 키를 누르다가 뗐을 때의 키보드 이벤트 함수이다. 이렇게 누르고 있을 때와 누르다가 땠을 때로 구분하니 종종 둘이 언제 사용해야하는지 헷갈리는 경우가 많았다. 그래서 순서로 생각을 해보기로 했다.

 

순서

키를 누르고 => 키를 뗀다. 즉 onKeyDown 이벤트가 먼저 발생하고, onKeyUp 이벤트가 발생한다. 또 다른 차이점은 onKeyDown은 여러번 발생하고, onKeyUp은 한번 발생한다라는 차이점도 있지만, 이런 횟수적인 차이보다는 순서적이 차이로 구분하는게 기억하기 좋았다.

 

언제 구분해야할까?

사실 위에서 무시한 횟수 때문에 구분해서 사용되는 경우도 있지만, 이 같은 경우에는 횟수에 따라 둘 중 하나만 사용해야하기 때문에 여기서는 설명을 생략한다. ContentEditable 같은 경우, 두 개의 이벤트를 모두 사용하면 함수를 간결하게 구분할 수 있다.

 

onKeyDown을 사용할 때

onKeyUp에서 아무리 애써봐도, 특정키의 입력을 막을 수는 없다. 특정키의 입력을 막으려면 onKeyDown에서 이벤트를 막아야한다. 문제는 onKeyDown으로 이벤트를 막으면 onKeyUp이벤트는 발생하지 않는다. 이유는 키를 누르다 뗀 이벤트이기 때문에 누른적이 없다면 무시가 되기 때문이다. 그래서 우선, 키를 막아야하는 경우에는 onKeyDown을 사용해서 키를 막고 나머지 함수가 넘어왔을 때 onKeyUp을 이용해서 함수가 키에 따라 호출되면 원하는 상황을 관리하기 쉽다.

 

마무리

최근에 contentEditable을 많이 건들다보니, onKeyDown, onKeyUp, 그리고 mouse와 관련된이벤트를 많이 다뤘던 것 같은데,  종종 preventDefault가 되야할 것 같은 상황에서 안되는 경우, 그리고 이벤트의 순서를 잘못 넣어서 시간을 허비한적이 많아서 이번기회에 어떤방식으로 이벤트의 플로우를 짜면 contentEditable에서 쉽게 관리하기 좋다! 라는 것을 기억하기 위해서 글을 남겼다. 최근에는 회사일을 하면서 ContentEditable을 은근 많이 만지게되는데.. 자바스크립트와 리액트의 꽃은 contentEditable이라고 생각이 든다.(꽃은 원래 성가시고 어려우면 꽃이라고 부른다고 배웠ㄷ..) 

 

.ps 최근에 너무 시간이 없다보니.. 예시 코드도 추가를 못하고 기억해야할 것만 메모하는 것 같아서.. 개인시간을 확보해서 글을 더 열심히 써야할 것 같다는 생각이든다... (흑.. 잘시간은 더 줄일 수 없으니 일단은.. 필요한 것만 메모를 하구.. 시간을 더 확보한 뒤 글을 쓰기로 하자)