div 태그 선택효과 주기 (focus, blur)

div 영역을 클릭했을때 선택된듯한 시각적 효과를 주려고한다.

따라서 focus와 blur를 사용하고자 한다.

 

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

 

---

 

* 트러블

div 객체를 가져온 후 .focus() 메소드를 수행시켰으나 전혀 먹지 않았다.

그 이유는 다음과 같다.

---

**

대다수의 요소는 기본적으로 포커싱을 지원하지 않기 때문이다.

포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 <button>, <input>, <select>, <a>와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 focus, blur를 지원한다는 사실이다.

반면 <div>, <span>, <table>같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않는다. 따라서 이런 요소엔 elem.focus() 메서드가 동작하지 않고 focus, blur이벤트도 트리거 되지 않는다.

 

 

위와같은 이유로 focus가 먹지 않는다면

선택 할때마다 class를 추가했다 제거했다 해야하는가.. 하고 고민을 했다. (classList.add 와 classList.remove의 경우!)

 

다행히 tabindex 라는 HTML 속성을 지원하였고 이를통해 해결할 수 있었다.

 

 

*방법

focus와 blur효과를 내고싶은 div영역에 tabIndex를 부여한다.

그리고 원하는 퍼블리싱을 반영할 class도 같이 지정한다.

<div class="focusDiv" tabindex="1">{{ ... }}</div>

// CSS

.focusItemEffect:focus {
    border: 1px dashed #4c5158 !important;
    background: red;
  }

이런 모양으로 부여하면 된다.

 

위에 부여한 정수는 1이지만 원하는 정수를 부여하면 된다.

 

 

• tabindex가 0인 요소는 tabindex 속성이 없는것처럼 동작합니다. 따라서 포커스를 이동시킬 때 tabindex가 0인 요소는 tabindex가 1보다 크거나 같은 요소보다 나중에 포커스를 받습니다.
• tabindex="0"은 요소를 포커스 가능하게 만들지만 포커스 순서는 기본 순서 그대로 유지하고 싶을 때 사용합니다. 요소의 포커스 우선 순위를 일반 <input>과 같아지도록 하죠.
• tabindex가 -1인 요소는 스크립트로만 포커스 하고 싶은 요소에 사용합니다. Tab키를 사용하면 이 요소는 무시되지만 elem.focus() 메서드를 사용하면 잘 포커싱 됩니다.

 

나는 tab으로 요소를 포커싱하는 기능은 필요하지 않았으므로

tabIndex를 -1을 부여하였다.

 

 

 

 

 

끝!!

 

 

*짧은 회고

tabIndex라는 속성 지원에 대해 무지했다면,

div를 클릭할때마다 돔에 접근해 강제로 class를 할당하고 (classList.add) 지우고(classList.remove)를 반복할 뻔 했다..

역시 아는것이 힘..!