📚 Reference

• 공식 문서 1

📜 Chapter

React & Event

focus, focusin, focusout

blur

• blur
• blur 이벤트는 특정 엘리먼트(요소)가 포커스를 잃었을 때 발생하는 이벤트이다.
• 예를 들어, 사용자가 텍스트 입력창(input)에 글을 쓰다가 다른 곳을 클릭하거나 Tab 키를 눌러 입력창을 벗어날 때 발생한다.
• 엘리먼트가 포커스를 잃었을 때 발생한다. 버블링되지 않는다.

특징

• 버블링(Bubbling)되지 않음: blur 이벤트의 가장 큰 특징은 이벤트가 상위 요소로 전파(버블링)되지 않는다는 점이다.
  • 만약 부모 요소에서 자식 요소들의 포커스 해제 상태를 감지하고 싶다면, 버블링이 발생하는 focusout 이벤트를 사용해야 한다.
• 취소 불가: 이 이벤트는 발생 후 취소(preventDefault)할 수 없다.

이벤트 위임(Event Delegation) 방법

• blur는 버블링되지 않지만, 부모 요소에서 자식의 blur를 감지해야 할 때가 있다. 이때는 두 가지 방법을 사용할 수 있다.

  1. focusout 이벤트 사용: blur 대신 버블링이 되는 이벤트를 사용한다.
  2. 캡처링(Capturing) 활용: addEventListener의 세 번째 인자인 useCapture를 true로 설정하면 상위 요소에서도 blur 이벤트를 포착할 수 있다.

  // 부모 요소에서 자식의 blur를 감지할 때
  document.getElementById("form").addEventListener("blur", function(event) {
    // 캡처링 단계에서 이벤트를 가로챔
  }, true);