[JS] 자바스크립트 이벤트 - 폼 이벤트(Form Event)

✅ 간단 정리

const id = document.getElementById(id) : id와 일치하는 요소 가져옴

 

id.addEventListener("이벤트명", (event) => {

   // 실행문장

});

✅ focus, blur : 포커스에 있을 때, 없을 때

See the Pen Untitled by Emily (@MsEmily1020) on CodePen.

텍스트창에 포커스가 있을 경우 -> 텍스트창을 클릭하면 됩니다.

빨간 배경으로 표시되며

 

다른 곳으로 포커스가 있을 경우 -> 다른 빈 곳을 클릭하면 됩니다.

다시 하양색 배경으로 돌아가게 됩니다.

 

✅ change : input창에 입력 후 다른 곳을 클릭한 다음, 다시 input 창을 클릭 시 이벤트 발생

1) input에 쓴 글자의 길이가 3 미만 또는 8 초과일 경우 글자 초기화

See the Pen Untitled by 2105_김혜승 (@2105_) on CodePen.

 

2) 선택 목록을 선택하면 input 텍스트로 보여짐

See the Pen Untitled by 2105_김혜승 (@2105_) on CodePen.