[자바스크립트 js] input 태그 / input 태그 종류 / 포커스 이벤트 / 입력 이벤트

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 input태그에 관한 내용을 다뤄볼건데요.

이번 포스팅에 있는 내용을 요약 하자면,

input 태그, input 태그 종류, focus에 관련된이벤트, input 입력 이벤트 입니다.

 

input은 정~~~~말 다양한 곳에서 사용되죠?

자주 사용하는 내용인 만큼 천천히 따라와 주세요 :)

 

 

  input 태그 종류

• text
• password
• button
• checkbox 등 종류 더 있음.

 

 

 

  포커스 이벤트 (키보드나 마우스 동작에 반응함)

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

 

🖐🏻 잠깐만, 버블링이 궁금하신가요?

[자바스크립트 js] 이벤트 버블링 Event Bubbling

 

 

 

  입력 이벤트

• input : 사용자가 입력을 하는 순간 마다 발생 / esc와 shift 키에는 반응하지 않음 (키보드 이벤트랑 다름)
• change : 입력된 값이 바뀌는 순간 / 입력이 완료된 순간에 발생 / enter키를 누르는 것으로 발생 가능
• select : 입력 양식의 하나가 선택되는 순간
• submit : 폼을 전송하는 순간