자바스크립트를 사용하다 보면 웹 페이지 요소에서 발생하는 이벤트에 대한 반응을 정의해야할 때가 있습니다.

document.getElementById("myButton").addEventListener("click", myFunction);
function myFunction() {
  alert("버튼이 클릭되었습니다.");
}

위의 예제는 id가 “myButton”인 버튼을 클릭할 때, myFunction 함수가 실행되도록 등록하는 방법을 보여줍니다.

이벤트 리스너 함수를 등록하는 방법은 해당 이벤트가 발생했을 때 실행될 함수를 지정해주는 것입니다.

이벤트 타입(Type of Event)

이벤트 리스너 함수를 등록할 때, 이벤트 타입을 명시해주어야 합니다. 예를 들어, 위의 예제에서는 “click”이라는 이벤트 타입을 사용하여 버튼 클릭에 대한 이벤트를 처리하였습니다.

다른 일반적인 이벤트 타입으로는 “mouseover”, “keydown”, “submit” 등이 있습니다.

이벤트 리스너 함수(Listener Function)

이벤트 리스너 함수는 이벤트가 발생했을 때 실행될 함수를 가리킵니다. 위의 예제에서는 myFunction이라는 이름의 함수를 이벤트 리스너로 등록하였습니다.

이벤트 리스너 함수는 일반적으로 이벤트 객체(event object)를 매개변수로 받아서 처리합니다.

결론

자바스크립트를 사용하여 웹 페이지의 이벤트에 대한 반응을 정의할 때, 이벤트 리스너 함수를 등록하는 방법을 이해하는 것이 중요합니다. 해당 이벤트 타입을 지정하고, 실행될 함수를 명시하여 원하는 동작을 구현할 수 있습니다.

이와 관련된 자세한 정보는 MDN web docs에서 확인하실 수 있습니다.