프로젝트를 진행하던 중 OnChange 이벤트와 OnBlur 이벤트의 동작 방식을 정리해두면 좋을 것 같다는 생각이 들었다.
먼저, 각 이벤트들이 어떤 상황일 때 일어나는지 mdn 문서를 참고하여 정리해볻자.
OnChange
change 이벤트는 <input>, <select>, <textarea> 와 같이 form과 관련된 요소들의 값이 변경될 때 발생하는 이벤트다.
OnBlur
blur 이벤트는 어떤 요소에 대해 focus가 해제되었을 때 발생한다.
blur와 focusout 과의 차이점
blur와 focusout 둘 다 어떤 DOM 요소에서 focus가 사라질 때 발생하는 이벤트라는 점에서 같지만, focusout의 경우, Event Bubbling 현상이 발생한다는 점에서 차이가 있다.
Event Bubbling이란?
Event Bubbling은 이벤트가 마치 거품처럼 퍼져나간다하여 지어진 이름으로, 부모와 자식요소들로 중첩된 DOM Tree 구조에서 자식 요소에서Event가 발생하면 부모에게까지 그 이벤트가 전달되는 현상을 말한다. 즉, 하위 요소에서 발생한 이벤트가 캡쳐링되지 않고 계속해서 상위 요소까지 전달된다.🔗
Event Bubbling에 대한 mdn 문서
따라서 onBlur 를 사용하면 해당 이벤트가 일어나는 요소에 한해서만 이벤트를 감지하고 처리할 수 있고, 반면에 focusout을 사용하면 focus가 사라지는 요소 뿐만 아니라 그 요소를 감싸고 있는 태그들에도 이벤트가 전파되어 감지할 수 있다.
OnBlur 와 OnChange 비교
둘 다 어떤 요소의 상태(OnBlur의 경우 focusout, OnChange의 경우 값의 변화, focus상태를 포함한 다양한 상태 변화)를 감지한다는 점에서 비슷하다. 특히, focusout과 관련해서 둘 다 상태변화를 감지하고 이벤트를 발생시키는데, 여기서 차이점은 실행 시점에 있다.
OnBlur의 경우 입력 필드에서 포커스를 잃을 때, 즉 어떤 상태 변화가 완료되고 나서 실행되는 반면, OnChange의 경우 상태 변화를 실시간으로 감지하여 값이나 상태가 변화될 때마다 실행된다.
💻 프로젝트 예시
onChange Event
input에 이메일을 입력받고 유효성 검사를 onChange의 이벤트 핸들러로 전달해보았다. 해당 코드를 실행하면 아래와 같이 입력값에 따라 실시간으로 유효성 검사 결과를 확인할 수 있다.
onBlur Event
이번에는 onBlur에 핸들러 함수로 유효성 검사 함수를 전달해보았다. 해당 코드를 실행하면 아래와 같이 focus가 아웃되었을 때, 즉 이벤트가 완료되었을 때 유효성 검사를 실행하고 결과값을 확인할 수 있다.
