자바스크립트에서 이벤트 리스너를 등록하는 방법은 여러 가지가 있습니다. 이를 통해 웹 페이지나 애플리케이션의 사용자 상호작용에 반응할 수 있게 됩니다. 이 포스트에서는 자바스크립트에서의 이벤트 리스너 등록 방법을 살펴보겠습니다.
1. HTML 요소에 직접 이벤트 리스너 등록하기
HTML 요소에 이벤트 리스너를 등록하는 가장 간단한 방법은 해당 요소의 속성으로 직접 이벤트 핸들러를 지정하는 것입니다. 예를 들어, 버튼 요소에 클릭 이벤트에 대한 핸들러를 추가하는 방법은 다음과 같습니다:
<button onclick="myFunction()">Click me</button>
위의 예제에서 onclick 속성을 사용하여 클릭 이벤트에 대한 핸들러 함수인 myFunction을 지정했습니다.
2. JavaScript로 이벤트 리스너 등록하기
HTML 요소에 직접 이벤트를 추가하는 것 외에도, JavaScript에서 addEventListener 메서드를 사용하여 이벤트 리스너를 등록할 수 있습니다. 이 방법은 더 유연하며, 하나의 이벤트에 사용자 정의 로직을 여러 개 추가할 수 있습니다.
예를 들어, 아래 코드는 버튼 요소에 클릭 이벤트에 대한 이벤트 리스너를 추가하는 방법을 보여줍니다:
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('버튼이 클릭되었습니다!');
});
위의 예제에서 addEventListener 메서드를 사용하여 버튼 요소에 클릭 이벤트에 대한 새로운 핸들러를 추가했습니다.
요약
자바스크립트에서 이벤트 리스너를 등록하는 방법에는 HTML 요소에 직접 이벤트를 추가하는 방법과 addEventListener 메서드를 사용하는 방법이 있습니다. addEventListener를 사용하면 더 유연하게 이벤트 핸들링을 할 수 있으므로, 일반적으로 이 방법을 선호합니다.
이를 통해 사용자가 웹 페이지나 애플리케이션과 상호작용할 때 발생하는 이벤트에 대해 쉽게 대응할 수 있습니다.
참고 문헌: