addEventLister 중 Blur와 Focus는 어떻게 쓸까?

https://ko.javascript.info/focus-blur

focus와 blur

기술에 대해 제일 잘 써져 있는 것은 공식 문서기때문에 제일 앞에 첨부를 하고

Blur와 Focus에 대해 내가 이해한 내용을 쉽게 풀어서 써보려고 한다.

 

 

Blur와 Focus는 addEventListener의 한 종류로써

focus는 이벤트를 쓴 요소에 포커스를 두었을때 발생하고

blur는 이벤트를 쓴 요소에 포커스를 잃었을때 발생한다.

 

모든 태그에 쓸 수 있는 줄 알았는데 사용자와 상호작용하는 태그들에만 사용이 가능하고

div, span 같은 태그에는 적용이 안된다고 한다.

하지만! 하고 싶을 때는 html의 tabindex 속성을 쓰면 된다.

속성값은 숫자로 표현되며 1에 포커스를 맞춰두고 tab 키를 누르면 그 다음 숫자로 넘어간다.

그 외에도 다른 특징도 있으니 공식문서를 통해 확인해보는것이 좋을 것 같다

 

이때 내가 써본건 blur 이벤트이다.

man이라는 요소 외를 누르면 메뉴박스의 opacity가 0이 되면서 보이지 않도록 설정했다.

function exitMenu() {
  let profileMenu = document.getElementsByClassName("profileMenu")[0];
  profileMenu.style.opacity = "0";
}

man.addEventListener("blur", exitMenu);