JavaScript에서 이벤트 핸들러를 작성하는 방법은 여러 가지가 있습니다. 이 기사에서는 JavaScript 코드를 사용하여 이벤트 핸들러를 작성하는 두 가지 주요 패턴에 대해 알아보겠습니다.

1. Inline 이벤트 핸들러

Inline 이벤트 핸들러는 HTML 요소의 속성으로 사용되는 방식입니다. 예를 들어, onclick 속성을 사용하여 클릭 이벤트를 처리할 수 있습니다.

<button onclick="handleClick()">Click me</button>

위의 예제에서 handleClick 함수가 클릭 이벤트 핸들러로 사용됩니다.

이 패턴은 간단하고 쉽게 적용할 수 있지만, HTML과 JavaScript 코드가 섞이는 단점이 있습니다. 또한, 여러 요소가 같은 이벤트 핸들러를 공유할 때 유지보수가 어려워질 수 있습니다.

2. Event Listener 이벤트 핸들러

두 번째 패턴은 addEventListener 함수를 사용하여 이벤트 핸들러를 작성하는 것입니다.

const button = document.querySelector('button');
button.addEventListener('click', handleClick);

function handleClick() {
  // 클릭 이벤트 처리 로직
}

이 패턴을 사용하면 JavaScript 코드와 HTML이 분리되어 유지보수가 용이해집니다. 또한, 같은 이벤트 핸들러를 여러 요소에 쉽게 할당할 수 있습니다.

결론

JavaScript에서 이벤트 핸들러를 작성하는 두 가지 패턴에 대해 살펴보았습니다. 각각의 장단점을 고려하여 상황에 맞는 패턴을 선택하여 사용하면 됩니다.

더 많은 정보를 원하시면 아래 링크를 참고하세요:

• MDN Web Docs: EventTarget.addEventListener()

Happy coding!