[JavaScript] 이벤트 객체 - target, type

이번 글은 이벤트 객체에 대한 설명글이다.

 

---

 

[ 이벤트 객체 ]

웹페이지에서 이벤트 발생 시, 이벤트와 관련된 다양한 정보를 담은 이벤트 객체 자동 생성

=> 이벤트 핸들러의 첫 번째 파라미터에 전달됨

 

 

아래 코드를 실행하였을 때, 클릭 이벤트 발생 시 printEvent 함수가 실행된다.

=> 이때 printEvent함수의 파라미터 e(이벤트 핸들러의 첫번째 파라미터)에 클릭 시 생성된 이벤트 객체가 전달됨

=> 아래 이미지처럼 전달된 이벤트 객체의 target과 type을 확인할 수 있음

function printEvent(e) {
	console.log(e);
}

myBtn.addEventListener('click', printEvent);

 

• target : 이벤트가 발생한 DOM요소
• type : 발생한 이벤트의 타입 (ex. 'click', 'mouseup', 'keydown' 등)
• currentTarget : 이벤트 핸들러가 등록된 요소
• timeStamp : 이벤트 발생 시각 (페이지가 로드된 이후부터 경과한 밀리초)
• bubbles : 버블링 단계인지를 판단하는 값

=> 그 외에도 마우스 이벤트 전용 값과 키보드 이벤트 전용 값 등등 있다.

이벤트 객체

 

 

---