Angular 프레임워크 - 이벤트 객체 디버깅으로 흐름 보기

Angular에서 $event가 어디에서 오는지 디버깅을 통해 확인해보겠습니다.

---

🔍 디버깅을 통한 $event 분석

1. 코드 작성

다음과 같이 HTML과 TypeScript 코드를 작성하여 이벤트 발생 시 $event가 어떻게 전달되는지 확인하겠습니다.

<!-- HTML 코드 -->
<button (click)="onClick($event)">Click Me</button>

// TypeScript 코드
onClick(event: MouseEvent) {
  console.log("MouseEvent 객체:", event);  // 전체 객체 출력
  console.log(`X: ${event.clientX}, Y: ${event.clientY}`); // 클릭 좌표 출력
  console.log("Event target:", event.target); // 클릭된 요소
  console.log("Event currentTarget:", event.currentTarget); // 이벤트 리스너가 바인딩된 요소
  console.log("Event type:", event.type); // 이벤트 타입 확인
}

---

2. 개발자 도구(F12)에서 디버깅

(1) console.log("MouseEvent 객체:", event); 출력 확인

1. 브라우저에서 F12(개발자 도구) → Console 탭을 엽니다.
2. 버튼을 클릭하면, 다음과 같은 MouseEvent 객체가 출력됩니다.

MouseEvent 객체: MouseEvent {isTrusted: true, screenX: 500, screenY: 300, clientX: 200, clientY: 150, ...}

📌 MouseEvent 객체가 브라우저에서 생성됨을 확인할 수 있습니다.

(2) console.log("Event target:", event.target); 출력 확인

Event target: <button>Click Me</button>

📌 클릭된 요소(<button>Click Me</button>)가 event.target으로 출력됩니다.

(3) console.log("Event currentTarget:", event.currentTarget); 출력 확인

Event currentTarget: <button>Click Me</button>

📌 currentTarget도 <button>을 가리키며, 이는 이벤트가 리스너가 바인딩된 요소에서 실행되었음을 나타냅니다.

(4) console.log("Event type:", event.type); 출력 확인

Event type: click

📌 발생한 이벤트가 click임을 확인할 수 있습니다.

---

3. 이벤트 흐름 분석

이제 $event가 어떻게 전달되는지 살펴보겠습니다.

1️⃣ 사용자가 버튼을 클릭하면 브라우저가 MouseEvent 객체를 생성
2️⃣ 브라우저의 이벤트 루프를 통해 해당 객체가 Angular 이벤트 시스템으로 전달됨
3️⃣ Angular는 click 이벤트가 발생한 것을 감지하고, (click)="onClick($event)" 바인딩을 해석
4️⃣ onClick() 함수가 실행되면서 $event가 인자로 전달됨
5️⃣ console.log(event)를 통해 실제 브라우저의 표준 이벤트 객체임을 확인 가능

---

✅ 결론

• $event는 브라우저의 표준 이벤트 시스템에서 생성된 MouseEvent 객체이다.
• Angular는 이벤트 바인딩을 통해 $event를 자동으로 핸들러 함수의 매개변수로 전달한다.
• 개발자 도구(F12)에서 console.log(event)를 찍어 보면, $event가 브라우저에서 발생한 실제 이벤트 객체라는 것을 확인할 수 있다.