1. input 태그 다루기

1.1 포커스 이벤트

• focusin : 요소에 포커스가 되었을 때

• focusout : 요소에서 포커스가 빠져나갈 때

• focus : 요소에 포커스가 되었을 때 (버블링 X)

• blur : 요소에서 포커스가 빠져나갈 때 (버블링 X)
  
  

input 태그는 입력의 역할을 하기 때문에, 사용자의 키보드나 마우스 동작에 반응하는 특징이 있다.

때문에, 기본적으로 포커스가 되어있는 상태에서는 파란색 테두리로 강조가 되어있다.
= 포커스 되어 있다.

1.2 입력 이벤트

• input : 사용자가 입력을 할 때

• change : 요소의 값이 변했을 때
  
  

input은 어떤 값이 입력될 때 발생하는 이벤트이기 때문에, esc나 shift와 같이 입력과 관련이 없는 key에서는 이벤트가 발생하지 않는다.

change는 입력이 시작되기 전의 값과 입력이 완료되었을 때의 값 사이에 차이가 있을 때만 이벤트가 발생한다.

일반적으로는, 포커스가 빠져나갈 때 입력이 완료되었다고 판단되어, change 이벤트가 focusout 이벤트 직전에 발생하게 된다.

또한, input 태그에서 값을 입력하다가 enter key를 누르는 것도 입력이 완료되었다고 판단된다. 이 경우에는, 포커스를 잃지 않은 상태로 change 이벤트가 발생하게 된다.