TIL

JavaScript

focus, blur 이벤트

리액트를 사용하면서 onChange 이벤트에 익숙해서
다른 기본 js 이벤트에 대해서 거의 잊을랑 말랑 하고 있었는데, 최근 form 유효성 검사로 앱과 스펙을 맞춰보며 수정사항이 생겨 고민해볼 일이 생겼다.

우리가 구현해야 되는 것은 앞뒤 공백은 제거하되, 중간 공백은 허용하는 것!
팀원이 제시한 방법은

1. onChange 시 바로 trim하기 -> 중간 공백 허용 안됨
2. 앞의 공백만 제거, 뒤 공백은 submit 시 제거
3. 앞뒤 공백 모두 submit 시 제거

이렇게가 있었는데, 2,3은 유저 관점에서 안 좋을 것 같았고,
1도 우리가 정한 형식을 다시 바꾸게 되는거라 아쉬웠다.
그 때 생각난 기본 이벤트..! blur!

blur

blur 이벤트는 엘리먼트의 포커스가 해제되었을 때 발생한다.
MDN을 찾아보니, focusout 이벤트와 같지만, focusout과 다르게 이벤트 버블링이 발생하지 않는다는 점이 있었다.
따라서 이벤트 위임을 사용하려면, focusout을 사용하면 된다!
*버블링 : 이벤트의 상향 전파 (이벤트가 발생한 엘리먼트의 핸들러 동작 -> 엘리먼트의 부모 엘리먼트의 핸들러 동작 -> 그 부모 …)

따라서 onfocus + input과 연결된 state의 onChange 시에는 앞의 공백을 제거해주면 되고,
onblur 시에 뒤 공백을 제거해주는 게 가장 적합할 것 같다!
기본에 충실해야겠다 ~.~