[JavaScript 입문과 웹 UI개발] input, change 이벤트

🎉 input 이벤트와 change 이벤트

<input> 태그에서 발생하는 이벤트들이 있다.

input 이벤트와 change 이벤트인데 <input> 안에 뭔가 입력할 때마다 발생한다.

🧐 input

document.getElementById('email').addEventListener('input', function(){
  console.log('안녕')
});

<input> 에 입력된 값이 변경될 때 input 이벤트가 발생한다.

<input> 에 뭐 입력할 때마다 콘솔창에 '안녕' 이 출력된다.

위와 같이 안녕이 10번 출력된 걸 알 수 있다.

즉 1 입력후 12 -> 안녕 출력 123-> 안녕 출력 이렇게 한 글자만 바뀌어도 계속 출력된다.

이런 식으로 비밀번호가 6자 이상은 되어야 하는데 4자리까지만 입력했을 때 이런 식으로 경고 알림을 띄워줄 수도 있다!

패스워드 입력 시 6자 이상 되어야 한다는 메세지가 6자 이상이 되기 전까지 계속 띄워줄 수 있는 것이다.

그러나 change 는 다르다.

🧐 change

document.getElementById('email').addEventListener('change', function(){
  console.log('안녕')
});

<input> 에 입력된 값이 변경되고 커서를 다른 곳에 찍으면(포커스를 잃으면) change 이벤트가 발생한다.

<input>에 뭐 입력하고 커서를 다른데 찍어으면 '안녕' 이 출력된다.

그래서 <input> 값이 변경되었을 때 뭔가 코드를 실행하고 싶으면 input, change 이벤트리스너를 활용해보면 된다.