TIL - 20220908

 오늘은 모던 JavaScript 튜토리얼에서 focus와 blur에 대해 공부했다. 작성한 질문은 다음과 같다.

 focus와 blur 이벤트는 다음과 같은 경우에 발생한다.

• focus: 요소가 포커스를 받을 때, 이벤트가 발생한다.
• blur: 요소가 포커스를 잃을 때, 이벤트가 발생한다.

회원가입 상황을 가정하여 focus 되었을 때는 에러 메시지를 숨기고 blur 되었을 때 규칙에 맞는 입력을 했는지 확인하고 알맞게 입력하지 않았을 경우 에러 메시지를 출력한다.

 

 사용자와 상호작용하는 요소인 <button>, <input>, <select>, <a>들은 확실히 focus와 blur를 제공하지만 <div>, <span>, <table> 요소들은 focus, blur 이벤트가 트리거되지 않는다. 하지만, tabIndex를 사용하면 포커스를 할 수 있다. tabIndex 속성이 있는 요소는 요소의 종류와 상관없이 포커스가 가능하며, 속성값은 숫자로 이 숫자는 Tab키를 눌러 요소 사이를 이동할 때 순서가 된다.