[JavaScript] 이벤트(3) - input의 이벤트

이번 글은 input의 이벤트와 관련된 글이다.

---

 

[ input 태그 ]

입력의 역할을 하기 때문에 입력이나 마우스 동작 같은 사용자에 반응하는 태그

 

---

 

[ focus 이벤트 ]

• focusin : 요소에 포커스가 되었을 때
• focusout : 요소에 포커스가 빠져나갈 때

// 사용 예시
요소명.addEventListener('focusin', 함수명);

 

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

=> 버블링의 차이 : focusin ↔ focus / focusout ↔ blur

 

---

 

 

[ 입력 이벤트 ]

• input : 사용자가 입력을 할 때
• change : 요소의 값이 변했을 때

=> input은 글자값이 입력될 때는 실행되지만 shift나 esc 같은 기능적인 요소의 키가 입력될 때는 실행 안됨

=> change는 입력이 시작되기 전 값과 입력 종료 후 값의 차이가 있을 경우에만 발생

(ex. input에 글씨 입력 후 다른 인풋을 누르거나 enter키를 누르면 해당 인풋의 값의 변경이 완료되었다고 판단하여 이때 change 출력)

 

 

---

 

[ 정리 ]

이벤트 타입	설명
focusin	요소에 포커스가 되는 순간
focusout	요소에 포커스가 빠져나가는 순간
focus	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur	요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)
change	입력된 값이 바뀌는 순간
input	값이 입력되는 순간
select	입력 양식의 하나가 선택되는 순간
submit	폼을 전송하는 순간

 

 

---