[JavaScript] 이벤트 객체

JavaScript

이벤트 객체 (Event Object)

특정 타입의 이벤트와 관련이 있는 객체입니다. 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있습니다. 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가집니다. 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달됩니다.

<input type="button" onclick="sendit()" value="완료">
function sendit(e){    // e : 이벤트 객체
	console.log(e.target);	// 이벤트 타겟
    	console.log(e.type);	// 이벤트 타입
}

 

이벤트 전파

이벤트 전파란 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정을 의미합니다. 이벤트의 대상이 window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않습니다. 하지만 document 객체나 HTML 문서의 요소에서 이벤트가 일어나면 대상 요소를 결정하기 위해 이벤트의 전파가 일어납니다. 이벤트 전파 방식은 버블링 전파방식과 캡처링 전파방식으로 나뉩니다.

자식에서 -> 부모로 이벤트가 전파되는 것을 (버블링 전파방식) 이라고 한다
부모 -> 자식 전파 (캡쳐링 전파방식) : addEventListener의 3번째 매개변수에 true를 넣어주면 된다.