이벤트 객채

현재 사진에 나와있는 코드는 hello라는 텍스트를 눌렀을때 console창에 hello라는 문구와 또 핸들러 함수의 파라미터값을 출력하라고 코드를 작성해놓았다.

그렇다면 이벤트 핸들러의 파라미터 e는 도대체 어떤 값을 가지는 걸까?

e는 바로 이벤트 객체이다

이벤트 객체는 이벤트가 발생하면 그 이벤트와 관련된 다양한 정보를 담고 있다.

그리고 항상 이벤트 핸들러의 첫번째 파라미터에 이벤트 객체가 전달 되는 것이다.(이벤트에 대한 정보를 담고 있어서 보통 파라미터 변수를 e또는 event로 둔다.)

출력한 결과를 보면

이렇게 수많은 프로퍼티를 가지고 있고 이 프로퍼티는 click이라는 이벤트에 관해서 설명을 해주는 프로퍼티이다.

보통은 각 이벤트 종류에 따라 이벤트 객체의 프로퍼티 값도 달라지지만 공통으로 가지고 있는 공용프로퍼티도 존재한다.

공용프로퍼티로는

type

발생한 이벤트에 대하여 타입을 알려주는 프로퍼티

timestamp

이벤트가 발생한 시각을 알려주는 프로퍼티

currentTarget

현재 발생하고 있는 이벤트가 최초로 등록된 요소를 가리킨다.

(이벤트 버블링을 모른다면 지금 하는 말이 무슨 말인지 싶을 수 있다. 이벤트 버블링에 대해서는 나중에 다루겠다.)

target

현재 이벤트가 발생한 해당 요소를 알려주는 프로퍼티인데 이 프로퍼티이다

currentTarget프로퍼티와 target프로퍼티는 특히 나중에 이벤트 버블링이라는 문제를 쉽게 해결해주는 아주 좋은 유용한 프로퍼티이다.