바닐라 자바스크립트를 이용해 이벤트 등록할 때 실수하기 쉬운 부분들

이벤트 리스너에서 실수하기 쉬운 부분

개발자가 만든 DOM 요소가 브라우저의 이벤트에 반응하게 만들기 위해서 이벤트 리스너를 등록한다. 이벤트 리스너는 웹사이트 이용자가 DOM 과 상호작용 가능하게 만들기 위해 필수적인 부분이다.

이벤트 리스너를 등록하는데는 잘 살펴보면 2가지 방법이 있다.

• EventTarget.addEventListener() 를 이용하는 방법
• HTML DOM 의 onclick 프로퍼티 를 이용하는 방법

두 방식은 약간 다르다.

EvnetTarget.addEventListener() 를 이용하는 방법

장점

• 하나의 이벤트에도 여러 개의 콜백 함수 등록이 가능하다.
  • ex) onclick 시에 연쇄적으로 여러 개의 함수가 호출되게 만들 수 있다.

단점

• 여러개의 이벤트 등록이 가능한만큼 이벤트 등록에 대한 이해가 없는 사람이 코드를 작성했을 때, 이벤트를 무한대로 등록하는 실수를 할 수 있다.
  • 이벤트가 여러 개 등록되는 경우 생각보다 치명적일 수 있다.
• 내가 등록한 API 를 볼 수 있는 native API 가 없다.
  • 단, 구글 크롬 개발자 도구나 jquery 내부 함수를 통해 볼 수 있긴 하다.

HTMLElement.onclick 과 같은 프로퍼티를 이용하는 방법

장점

• 단, 하나만 등록되기 때문에 중복 등록의 걱정이 없다.
• 등록된 이벤트를 명확하게 볼 수 있다.

document.getElementById("innerSearchButton").onclick; // () => reSearch()

위와 같이 콘솔에서 조회하면 어떤 이벤트가 등록되었는지 명시적으로 나온다.

단점

• 여러 개의 이벤트 등록이 불가능하다.
  • 사실 코드를 꼼꼼히 제대로 작성한다는 가정 하에는 이벤트 중복 등록이 일어날 여지는 적다.

개인적인 의견

.onclick 으로 프로퍼티에 이벤트를 등록해두는 편이 좋다고 생각한다. 일단 명시적으로 등록된 이벤트를 볼 수 있는 방법도 제공되고, 팀원들의 코딩 수준에 따라 다르겠지만, 아무튼 실수를 예방할 수 있기 때문이다.