[이벤트 살펴보기] 04. 이벤트 객체

키보드와 마우스를 이용해서 컴퓨터의 거의 모든 동작들을 다루기 때문에 특별한 경우를 제외하면 웹 페이지에서 일어날 수 있는 이벤트도 대부분은 키보드와 마우스 이벤트로 이루어집니다.

그래서 키보드로 제어할 수 있는 대표적인 이벤트인 키다운과 마우스로 제어할 수 있는 대표적인 이벤트인 클릭에 대해서 이벤트 핸들러를 하나씩 등록해보았습니다.

// 이벤트 객체(Event Object)
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');

myInput.addEventListener('keydown', function (){
  console.log('KeyboardEvent');
}

myBtn.addEventListener('click', function (){
  console.log('MouseEvent');
}

코드를 실행해보면 input 태그에서 키보드를 누를 때 키보드 이벤트가, 버튼을 클릭했을 때 마우스 이벤트가 출력이 됩니다.

그런데 지금처럼 단순한 이벤트라면 크게 상관없지만 이벤트를 좀 더 제대로 다루기 위해서는 이벤트에 대한 상세한 정보가 필요합니다. 예를 들어서 클릭 이벤트가 발생했다면 정확히 어떤 요소를 클릭했는지 혹은 클릭한 시점에 마우스 포인터의 위치는 어디였는지 키보드 이벤트가 발생했다면 어떤 키를 눌렀는지 이런 정보가 필요한데요 

다행히 웹 페이지에서 어떤 이벤트가 발생하면 그 이벤트와 관련된 다양한 정보를 담고 있는 이벤트 객체가 자동으로 만들어집니다. 그리고 우리는 이때까지 사용하진 않았지만 이벤트 핸들러의 첫 번째 파라미터에는 항상 이 이벤트 객체가 전달되는데요. 

// 이벤트 객체(Event Object)
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');

function printEvent(event) {
  console.log(event);
  event.target.style.color = 'red'
}

myInput.addEventListener('keydown',printEvent);
myBtn.addEventListener('click', printEvent);

코드를 수정해 보았습니다. 지금은 이름을 event라고 해두긴 했지만 일반적으로 알파벳 e만 사용하기도 하고 어떤 이름이 됐건 이벤트 핸들러가 되는 함수의 첫 번째 파라미터는 무조건 이벤트 객체가 전달됩니다. 

그래서 이렇게 되면 keydown 이벤트가 발생할 때도 이벤트 객체가 출력이 되고 클릭 이벤트가 발생할 때도 이벤트 객체가 콘솔에 출력됩니다. 클릭 이벤트가 발생할 때도 마찬가지로 이벤트 객체가 콘솔에 출력됩니다.

 

저장하고 코드를 실행해보면 키보드를 누를 때 키보드 이벤트가 그리고 버튼을 클릭할 때는 마우스 이벤트가 출력되는 모습을 확인할 수 있습니다. 각각 펼쳐보며 굉장히 많은 프로퍼티를 가지고 있는 걸 확인할 수가 있는데 공통적으로 자주 사용되는 프로퍼티는 type과 target 프로퍼티입니다. type은 말 그대로 발생한 이벤트의 타입을 담고 있고 target은 이벤트가 발생한 해당 요소를 담고 있습니다.

 

특히나 target은 dom 요소가 담겨있기 때문에 예를 들어서 이벤트가 발생했을 때 해당 요소를 수정한다거나 혹은 그 요소가 가지고 있는 속성값들을 참조해야 되는 상황에서 유용하게 활용될 수가 있습니다.