1. 사용 방법

만약 버튼을 누르거나 엔터를 쳤을 때, 특정 함수가 실행되게 하고 싶다면 어떻게 해야 할까요?

addEventListener를 사용하면됩니다.

사용법은 다음과 같습니다.

요소.addEventLsitener("어떤 동작에 반응할 것인지", 반응할 함수);

아래 예시를 보면서 더 감을 잡아봅시다.

function onClick(event) { //event에 대해서는 나중에 언급하겠습니다.
	console.log("눌렀습니다.");
};

const button = document.querySelector("button");
button.addEventListener("click", onClick)

먼저 여기서 요소는 querySelector로 받아온 태그를 저장하는 변수인 button입니다.

button은 “click”할 때에 onClick이라는 함수를 실행할 것입니다. 이때 중요한 점은, 반응할 함수를 바로 호출시키면 안된다는 것입니다.

onClick(); 

위와 같은 구문은 코드를 바로 실행시킨다는 의미로 button을 click 하기도 전에 onClick함수가 실행되어 버립니다. 우리는 그 대신 onClick 이라는 함수명만 사용해야 합니다.

그런데 만약 버튼이 클릭되었을 때의 값을 인수로 보내고 싶다면 어떻게 할까요? 아래와 같이 말이죠.

onClick(어떠한 인수);

정답은 그렇게 할 필요가 없습니다. javascript가 알아서 event가 발생할 때 있을법한 매개변수들을 object 형태로 보내주기 때문이죠. 이것에 관련해서는 아래에 더 자세히 다루겠습니다.

2. 이벤트 객체에 접근하기

function onClick(event) { //event??
	console.log("눌렀습니다.");
};

const button = document.querySelector("button");
button.addEventListener("click", onClick) //인수를 넘겨주지 않음

위 함수를 보겠습니다. 분명 addEventListener에서 onClick함수를 사용하려고 할때(호출하지는 않음), 어떠한 인수도 넘겨주지 않았는데, onClick에 event라는 매개변수가 위치하고 있습니다.

(이때, 매개변수 event의 이름은 바뀌어도 상관 없습니다.)

이 이유는 바로, javascript가 자동으로 이벤트가 실행되었을 때 필요한 인수들을 넘겨주고 있기 때문입니다.

아래의 예시로 더 자세히 살펴보겠습니다.