12.7.1 이벤트 객체 사용하기

지금까지 사용하지는 않았지만, 사실 이벤트가 발생하면 실행되는 함수에는 내부적으로 이벤트 객체가 매개변수로 전달됩니다. 예를 들면, 다음은 addEventListener() 메서드로 이벤트를 등록하는 코드인데, 앞에서와 달리 이벤트 함수에 매개변수(event)가 지정된 것을 볼 수 있습니다. 원래 매개변수는 함수를 호출하는 쪽에서 데이터를 전달해야 받을 수 있지만, 이 코드에서는 데이터를 전달하는 부분이 눈에 보이지 않습니다. 사실 이 부분은 addEventListener() 메서드 내부에 감춰져 있어서 세부 내용을 자세히 알 필요가 없습니다. 간단하게 이벤트 함수에는 이벤트 객체라는 데이터가 내부적으로 전달되어 호출된다고만 이해하면 됩니다.

<button>클릭</button>
<script>
  const btnEl = document.querySelector("button");
  btnEl.addEventListener("click", function(event){ // 이벤트 객체
    console.log(event);
  })
</script>

매개변수를 사용해 이벤트 객체를 받아도 되고, 매개변수를 사용하지 않아도 됩니다. 이것이 매개변수의 작동 원리라는 것은 10.3.2 매개변수의 특징에서 배웠습니다. 하지만 매개변수를 사용해 이벤트 객체를 받으면 이벤트 객체를 활용할 수 있게 됩니다.