Form 관련 이벤트

CGH96·2022년 8월 30일
0

JS

목록 보기
1/3

foucs, blur 이벤트

요소가 focus를 받을 때 focus, 요소가 focus를 잃을 때, blur이벤트가 발생한다.

elem.focus(), elem.blur()를 사용하면 요소에 포커스를 주거나 제거할 수 있다.




foucsin, foucsout 이벤트

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>



두번째 방법은 focusinfocusout을 이용하는 것이다.

<script>
  form.addEventListener("focusin", () => form.classList.add('focused'));
  form.addEventListener("focusout", () => form.classList.remove('focused'));
</script>

요약

  1. focus, blur는 버블링 X, 캡처링 O
  2. focusin, focusout은 버블링 O

0개의 댓글