[Javascript] 이벤트 핸들러 등록 여부 확인하기

버튼을 클릭하거나 키보드로 입력하는 등 사용자 이벤트에 따라 addEventListener를 동적으로 추가하는 로직을 작성하는 경우 중복된 바인딩으로 이벤트 콜백이 여러 번 발생될 수 있다.

이럴 때에는 조건문으로 해당 요소에 특정 이벤트 바인딩이 되어 있는지 확인하고 분기할 필요가 있는데 여기에 관련된 구글링을 좀 해보면 getEventListeners()라는 API가 나온다. 하지만 이는 크롬 개발자도구의 콘솔창용 API지 자바스크립트 표준 함수가 아니기 때문에 스크립트에서 사용할 수 없다.

결론부터 말하자면 현재 자바스크립트 진영에서 직접적으로 이벤트 바인딩을 검사하는 API는 지원되지 않는다. 따라서 다른 방법으로 우회하는 로직을 짜야 하는데, 대표적으로 요소에 class를 부여해서 해당 class가 없으면 이벤트 바인딩을 하고 있으면 안 하는 방식이 있다.

const registerEvent = function() {
	 // 만약 textarea라는 요소에 once1이라는 클래스가 있으면 return
    if ($textarea.classList.contains('once1')) return; 

    // 클래스 추가
    $textarea.classList.add('once1');

    // 이벤트 핸들러 등록
    $textarea.addEventListener('drop', handleDrop);
    $textarea.addEventListener('paste', handlePaste);
}