D-17

🔍 이벤트 객체란?

이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다.
모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와
이벤트의 대상을 나타내는 target프로퍼티를 가진다.
이벤트 객체는 코드 내에서 e로도 사용된다.
(이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 저장된다.)
ex) 마우스 이벤트 -> 마우스의 위치 정보 포함, 키보드 이벤트 -> 누른 키의 키코드 등

📌 예시

 <button class="btn">버튼</button>

버튼을 하나 만들었다.

const btn = document.querySelector('.btn');
btn.addEventListener('click', ()=> {
  console.log('버튼을 클릭했습니다.');
})

버튼에 click이벤트가 발생했을 때
"버튼을 클릭했습니다" 라는 메시지가 콘솔에 출력되도록 만들었다.

이 때 event 객체를 이용하지 않아 매개변수로 event를 전달할 필요가 없다.
하지만 함수 내부에서 이벤트 객체를 사용해야 한다면, 매개변수로 반드시 event를 입력해야한다. (event 또는 e를 사용한다.

btn.addEventListener('click', (event) => {
  console.log(`이벤트 객체를 사용하여 ${event.target.textContent}의 textContent를 출력합니다.`)
})

하지만 매개변수로 event를 명시적으로 입력하지 않아도 함수 내부에서 event라는 변수는 사용 가능하다.

btn.addEventListener('click', () => {
  console.log(`event객체를 사용하여 ${event.target.textContent}의 textContent를 출력합니다.`)
})

💡 event 객체의 정보를 사용해야 할 경우 매개변수를 명시적으로 적을 것을 권장한다.