focusout 과 blur 의 차이

로그인 화면 구현에서 아이디 중복확인이라던가 유효성 검사 (아이디, 비번, 이메일 양식을 제대로 입력했는가)

를 검사할 때 어느 순간에 해당 함수를 일으킬 것인가에 대한 이벤트가 필요하다

 

중복 아이디를 검사할 때 해당 아이디의 input태그를 focusout하는 순간에 중복확인을 검사했는데 

다른 개발자가  blur 이벤트를 사용하는 것을 보고 차이점이 궁금했다

 

둘의 차이는 "버블링 여부"이다.

 

focusout은 버블링이 일어나고 blur는 버블링이 일어나지 않는다.

즉 focusout은 상위 요소에 까지 이벤트가 전달이 되고 blur가 발생하는 요소는 상위 요소(부모 요소)에 이벤트가 전달되는 일이 발생하지 않는 것이다.

 

focusin은 focusout과 마찬가지이고

focus는 blur와 마찬가지이다. 

 

이로 인한 사이드 이펙트를 발생시키고 싶지 않으면 blur와 focus를 사용하는 것이 좋을 듯 하다

하지만 input 요소에서 focus를 주고 잃을 때 부모요소에서 어떤 동작을 구현하고 싶다면 focusin, focusout을 사용하면 좋을 것 같다

 

 

 

출처

https://ibrahimovic.tistory.com/13

https://mygumi.tistory.com/321