[자바스크립트] 이벤트 객체(Event Object), 이벤트 전파

1) 이벤트 객체(Event Object)란?

- 특정 타입의 이벤트와 관련이 있는 객체를 말한다.

- 해당 타입의 이벤트에 대한 상세 정보를 저장한다.

- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가진다.

- 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달한다.

 

<input type="button"  onclick="sendit()" value="확인">

const sendit = funtion(e) { // e : 이벤트 객체
	console.log(e.target); // 이벤트 타겟 객체
	console.log(e.type); // 이벤트 타입 click
 }

 

2) 이벤트 전파

- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 말한다.

- 이벤트의 대상이 window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않는다.

- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어난다.

- 이벤트 전파방식은 버블링, 캡쳐링 방식으로 나뉜다.

 

3) 이벤트 전파 방식

1. 버블링 : 자식 -> 부모 전파

2. 캡쳐링 : 부모 -> 자식 전파