이벤트 객체란?

이벤트 객체는 이벤트가 발생했을 때 브라우저(또는 jQuery)가 자동으로 생성하여 핸들러 함수에 넘겨주는 정보 객체입니다.

이 객체는 다음과 같은 이벤트 관련 정보들을 담고 있습니다.

• 이벤트 발생한 요소 (e.target)
• 이벤트 종류 (e.type)
• 마우스 위치 (e.pageX, e.pageY 등)
• 기본 동작 취소/전파 제어 (e.preventDefault(), e.stopPropagation())

이벤트 객체의 핵심은,
브라우저(또는 jQuery)가 이벤트가 발생했을 때,
자동으로 이벤트 객체를 만들어서 핸들러 함수의 첫 번째 인자로 전달한다는 것입니다.

이벤트 객체는 누가, 언제 넘겨주는가?

항목	설명
누가?	브라우저 또는 jQuery
언제?	이벤트가 발생해 핸들러가 실행될 때
어떻게?	함수의 첫 번째 매개변수로 자동 전달
이름은?	아무 이름이나 가능 (e, event, banana 등)
선언 안 하면?	e is not defined 에러 발생

이벤트 객체는 브라우저가 자동으로 넘겨주지만,
핸들러 함수에서 매개변수로 선언하지 않으면 사용할 수 없습니다.

예시: 이름은 자유지만 첫 번째 자리에 선언해야 함

$("#btn").click(function (e) {
  console.log(e.type); // "click"
});

$("#btn").click(function (banana) {
  console.log(banana.type); // "click"
});

$("#btn").click(function () {
  console.log(e); // ❌ ReferenceError: e is not defined
});

jQuery의 이벤트 객체

jQuery에서 핸들러를 작성할 경우에도 이벤트 객체는 자동으로 전달됩니다. 다만, jQuery는 브라우저의 기본 Event 객체를 확장하여 jQuery.Event 객체로 제공합니다.

$("#btn").click(function (e) {
  console.log(e instanceof jQuery.Event); // true
});

이렇게 확장된 객체는 다음과 같은 기능을 더 포함합니다.

• .isDefaultPrevented(), .which, .pageX, .data 등
• 브라우저마다 다를 수 있는 이벤트 정보를 일관성 있게 제공

이벤트 객체로 할 수 있는 일

이벤트 객체는 단순히 이벤트 종류나 발생 요소뿐 아니라, 다양한 이벤트 흐름을 제어하는 데 사용할 수 있습니다.

이벤트 객체를 잘 활용하면 클릭한 대상만 골라 조작하거나, 이벤트 흐름을 통제하거나, 사용자 행동을 감지하고 반응하는 모든 작업을 세밀하게 처리할 수 있습니다.

$("#btn").click(function (e) {
  console.log(e.type); // 이벤트 종류: "click"
});

• 어떤 이벤트인지 확인할 수 있습니다 (예: click, mouseover, submit 등)

$("#btn").click(function (e) {
  console.log(e.target); // 이벤트가 실제 발생한 요소
});

• 사용자가 실제 클릭한 요소를 가져옵니다 (버튼 안쪽의 span 등도 감지 가능)

$("#btn").click(function (e) {
  console.log(e.currentTarget); // 이벤트가 바인딩된 요소
});

• 이벤트를 바인딩한 요소를 가리킵니다 (위임 시 this와 같음)

$("a").click(function (e) {
  e.preventDefault(); // 링크의 기본 이동 동작을 막음
});

• a 태그, submit 버튼 등의 기본 동작을 막을 수 있음

$("#btn").click(function (e) {
  e.stopPropagation(); // 이벤트가 상위 요소로 전달되지 않게 함
});

• 이벤트가 상위 요소로 전파되는 것을 막습니다 (버블링 차단)

this와 e.target 차이

• this: 현재 이벤트가 바인딩된 요소 (일반적으로 .on()의 선택자)
• e.target: 실제 이벤트가 발생한 요소

<ul id="menu">
  <li class="item"><span>텍스트</span></li>
</ul>

$("#menu").on("click", ".item", function (e) {
  console.log(this);     // <li class="item">
  console.log(e.target); // <span>
});

정리

항목	설명
이벤트 객체란	이벤트 발생 시 전달되는 정보 객체
누가 넘기나	브라우저 또는 jQuery
언제 전달되나	이벤트 발생 시 핸들러 호출과 함께
어디로 전달되나	핸들러 함수의 첫 번째 인자
이름은 자유?	네, e, event, banana 등 가능
선언 안 하면?	e is not defined 에러 발생
jQuery에서의 객체	jQuery.Event로 확장됨