🚀 이벤트 핸들러 등록 되어있는지 검사 방법

자바스크립트 이벤트 핸들러 등록 체크

만일 addEventListener 를 버튼을 누르거나 사용자 행동에 따라 동적으로 이벤트를 등록하는 로직을 사용할 경우, 처리를 잘못 할 경우 중복으로 이벤트 핸들러를 여러번 바인딩되어 이벤트 콜백이 여러번 발생되는 현상이 생길 수 있다.

이럴때 조건문으로 해당 엘리먼트 요소가 특정 이벤트 바인딩이 되어있는지 검사를 하고 분기를 할 필요가 있는데, 구글링을 해보면 getEventListeners() 라는 api 라는게 나온다. 하지만 getEventListeners() 는 크롬 개발자 도구 콘솔창 용 api지 자바스크립트 표준 메소드가 아니기 때문에 스크립트에서 사용할수가 없다.

[ERROR] ⚠️ ReferenceError: getEventListeners is not defined

 

결론을 말하자면, 현재 직접적으로 이벤트 바인딩 검사하는 api는 따로 지원하지 않는다.

따라서 다른방법으로 우회하는 로직을 짜야되는데, 대표적으로 해당 엘리먼트에 '클래스명'을 부여해서 해당 클래스가 없으면 이벤트 바인딩을 하고, 있으면 안하는 식으로 짜면 된다.

const registerEvent = function() {
	// 만일 textarea요소에 해당 클래스명이 있으면 리턴
    if ($textarea.classList.contains('once1')) return; 

    $textarea.classList.add('once1');

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