EventListener와 EventHandler

EventListener 없이 한 요소에 여러 EventHandler를 할당하게 될 경우, 효율적인 관리가 어렵기 때문에 유지보수 측면에서 어려움이 많을 것이다.

 

아래는 EventListener에 EventHandler를 등록하고 삭제하는 예제이다.

// 이벤트 리스너에 이벤트 핸들러 등록
(요소를 담고있는)변수.addEventListener('이벤트 타입(속성)', 이벤트 핸들러);

// 이벤트 리스너에 등록된 이벤트 삭제
(요소를 담고있는)변수.removeEventListener('이벤트 타입(속성)', 이벤트 핸들러));
// removeEventListener는 addEventListener로 생성한 이벤트만 삭제할 수 있다.

 

위 예제를 활용하여 #idName를 담고 있는 variable에, EventListener를 활용하여 여러 EventHandler를 등록해보자.

// 예제

// querySeletor로 임의의 ID인 idName을 선택 후 variable에 대입
let variable = document.querySeletor('#idName');

// 이벤트 핸들러 event1, event2, event3 생성
function event1() {
	console.log('이벤트1');
}

function event2() {
	console.log('이벤트2');
}

function event3() {
	console.log('이벤트3');
}

// 이벤트 리스너에 event1, event2, event3 등록
variable.addEventListener('click', event1);
variable.addEventListener('click', event2);
variable.addEventListener('click', event3);

// 이벤트 리스너에 등록된 event3 삭제
variable.removeEventListener('click', event3);

 

위 코드처럼 작성하고 HTML상에 idName 값을 가진 태그를 클릭하면, 콘솔에 아래처럼 값이 뜬다. 

이벤트3은 removeEventListener를 통해서 삭제해주었기 때문에, 콘솔에 뜨지 않는다.

이벤트1
이벤트2