FrontEnd/Javascript

[JavaScript] 이벤트리스너(Event Listener)란? - 사용법 및 주의사항

김평범님 2021. 4. 5. 20:21
반응형

이벤트리스너(EventListener) 란?

동적인 웹 애플리케이션의 구현을 위해서는

사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다.

 

이러한 개념에서 Javascript 이벤트 객체에 대해서 관심을 가질 필요가 있다.

 

🎉 JavaScirpt 이벤트란?

DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.

DOM 구조에서 이벤트는 매우 다양하지만,  자주 쓰는 이벤트는 아래와 같다. 

  • 포커스 이벤트(focus, blur)
  • 폼 이벤트(reset, submit)
  • 뷰 이벤트(scroll, resize)
  • 키보드 이벤트(keydown, keyup)
  • 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave)
  • 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop)

 

🔔이벤트 리스너

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.

이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.

 

이벤트 리스너 등록하기

특정 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener를 사용한다.

DOM객체. addEventListener(이벤트명, 실행할 함수명, 옵션)

각 매개변수를 살펴보면

이벤트명 : Javascript에서 발생할 수 있는 이벤트 명을 입력한다.

함수명 : 해당 변수는 생략 가능하며, 해당 이벤트가 발생할 때 실행할 함수 명을 입력한다.

옵션: 옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

(옵션 부분은 복잡해서 일단 오늘 포스팅에서는 자세한 설명은 하지 않겠다😶)

 

샘플 코드

<html>
 <a>클릭</a>
</html>
<script>
 const a = document.querySelector('a');
  a.addEventListener('click', showConsole);
  function showConsole() {
  	console.log("콘솔로그 실행");
  }
</script>

 

위의 방식으로 이벤트 리스너를 등록하면,

사용자 이벤트마다 특정 코드를 실행하는 것이 가능하다.

이벤트 리스너를 이용할 경우 특정 스크롤 이벤트 발생 시 이벤트를 실행

혹은 input 태그에 글자 수를 확인하는 등의 코드로 활용이 가능하다.

 

만약 특정 function을 호출하는 경우가 아니라 해당 이벤트 리스너에

공통의 function이 아니라고 하면 화살표 함수로 작성해줘도 코드는 작성한다.

<html>
 <a>클릭</a>
</html>
<script>
 const a = document.querySelector('a');
  a.addEventListener('click', ()=> {
  	console.log("콘솔로그 실행");
  });
</script>

 

 

이벤트 리스너 삭제하기

이벤트 리스너의 경우 웹 애플리케이션 메모리 누수의 원인이 될 수 있다.

더 이상 해당 이벤트 리스너가 필요 없다고 하면 반드시 추가된 이벤트 리스너는  반드시 삭제해주어야 한다.

특정 페이지에서만 사용하는 이벤트 리스너라면 해당 페이지를 떠날 때 이벤트 리스너를 삭제해준다.

이벤트 리스너를 삭제할 땐 removeEventListener을 이용한다.

DOM객체. removeEventListener(이벤트명, 실행했던 함수명);

 

 

샘플 코드

//VUE Project EventListener 삭제 예시 코드
<script>
export default {
	...
        mounted() {
            a.addEventListener('click', this.showConsole);
        },
        beforeDestroy() {
            a.removeEventListener('click', this.showConsole)
        },
        
	...
 }
 </script>

나의 경우 Vue 코드에서 eventListener를 이용했다.

특정 vue페이지에서 addEventListener를 추가했다면 해당 페이지를 떠날 때 

반드시 beforeDestroy() 메서드에서 추가한 이벤트 리스너를 removeEventListener로 삭제했다.

 

Vue의 mounted는 해당 페이지가 렌더링 되었을 때 실행되고,

beforeDestroy는 페이지가 떠나기 전 해당 코드가 실행된다.

 

즉, 더 이상 이벤트 리스너가 필요 없다면 꼭 제거해주어야 한다.

 


Reference

developer.mozilla.org/ko/docs/Web/Events

developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

반응형