[JavaScript] 이벤트 객체

이벤트 핸들러의 첫번째 파라미터에는 이벤트 객체가 전달된다. event 라고 작성해도 되지만 대게 e 로 작성한다.

 

// 이벤트 객체 (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);

위처럼 keydown 이벤트가 발생하면, 이벤트 정보를 담은 객체값이 같이 출력됨.

특히 target 은 이벤트가 발생했을 때 해당요소를 수정하거나, 요소가 가진 속성값을 참조하는데 매우 유용하게 사용된다.