JavaScript - DOM Event (2)

1. 이벤트 객체와 키보드 이벤트

//버튼이 존재한다고 가정하자.

document.querySelector('button').addEventListener('click', function(evt) {
	console.log(evt)
})

• 매개변수 안에 들어간 evt는 무엇일까?
  evt는 이벤트에 대한 정보를 담고 있는 객체이다.

왜? 이벤트 객체와 키보드 이벤트와 연관이 있을까?

: 키보드 이벤트를 사용할 때 어떤 키가 눌려졌는지 알아내야 하는 상황에서 이벤트에 대한 정보를 담고 있는 객체이기 때문에 알 수 있기 때문이다.

//텍스트를 받는 input에 keydown 특성을 활용

const input = document.querySelector('input');
input.addEventListener('keydown', (e) => {
	console.log(e);
})

//이벤트에 대한 객체를 확인할 수 있으며, 키보드 이벤트에는 두가지를 잘 확인해야함.
//input에 t버튼을 입력했다고 하자.

code : "KeyT"
key : "t"

• code: 키보드에서 실제 위치를 표시
  • key : 키보드에서 입력된 실제 값

2. 변경 이벤트

//input이 존재.
const input = document.querySelector('input');
input.addEventListener('change', (e) => {
	console.log(e);
})

변경 입력은 오로지 입력을 블러처리 할 때만 작동하게 된다.
즉, "입력을 떠날 때마다" 작동한다고 생각하면 이해하기 편하다.

3. 입력 이벤트

const input = document.querySelector('input');
input.addEventListener('inpur', (e) => {
	h1.innerText = input.value
})

이건 만약 input 의 입력값에 따라 실시간으로 h1을 변화시키게 만들어줄 수 있다.
따라서 input 은 입력하는 것에 따라 결과가 달라지며, change는 블러처리 된 경우에만 작동한다는 것을 잊지 말자.