JavaScript의 change 이벤트

이번 강의에서는 입력 필드의 값이 변경될 때 발생하는 change 이벤트를 함께 살펴보겠습니다. 이게 무슨 뜻일까요? 예를 들어, 당신에게 인풋 필드가 있고 그 안에 어떤 텍스트가 있다고 가정해 봅시다. 만약 그 텍스트를 변경한다면, 바로 이때 이 이벤트가 발생합니다.

예제를 통해 알아보겠습니다. 다음과 같은 인풋 필드가 있다고 해봅시다:

<input id="elem" value="text">

값이 변경될 때마다 그 새로운 값을 콘솔에 출력해 봅시다:

let elem = document.querySelector('#elem');

elem.addEventListener('change', function() {
	console.log(this.value);
});

인풋 필드와 단락이 주어졌습니다. 인풋 필드가 변경될 때마다 그 텍스트를 단락에 출력하세요.

체크박스가 주어졌습니다. 체크박스 상태가 변경될 때마다 그 새로운 상태를 화면에 출력하세요.

blur 이벤트와 change 이벤트의 차이점에 대해 설명하세요.

인풋 필드가 주어졌습니다. 값이 변경될 때마다, 필드 내 문자 수가 5개 미만인지 확인하세요. 만약 더 적다면 인풋 필드의 테두리를 초록색으로, 더 많다면 빨간색으로 칠하세요.