요소가 focus를 받을 때 focus
, 요소가 focus를 잃을 때, blur
이벤트가 발생한다.
elem.focus()
, elem.blur()
를 사용하면 요소에 포커스를 주거나 제거할 수 있다.
focus와 blur는 이벤트 버블링이 일어나지 않는다.
예를 들어 아래와 같은 코드가 있다고 하자.
<form onfocus="this.className='focused'"> <input type="text" value="username"> <input type="password" value="password"> </form> <style> .focused { outline: 1px solid red; } </style> ```> 이 코드가 의도하는 것은 form의 자식요소들인 input에 focus를 주면 focus이벤트가 발생한 input의 outline을 빨간색으로 강조하고자 하는 것이다. 하지만 focus이벤트는 버블링이 발생하지 않아서, 이벤트가 자식요소에 위임되지 않기 때문에 `form.onfocus`는 발생하지 않는다.
원하는 바를 구현하기 위한 두가지 방법이 있다.
첫번째는
focus
가 버블링은 되지 않지만 캡처링은 가능하다는 것을 이용하는 것이다.<script> form.addEventListener("focus", () => form.classList.add('focused'), true); form.addEventListener("blur", () => form.classList.remove('focused'), true); </script>
두번째 방법은
focusin
과focusout
을 이용하는 것이다.<script> form.addEventListener("focusin", () => form.classList.add('focused')); form.addEventListener("focusout", () => form.classList.remove('focused')); </script>
focus, blur
는 버블링 X, 캡처링 O