동적인 웹 애플리케이션의 구현을 위해서는
사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다.
이러한 개념에서 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
'FrontEnd > Javascript' 카테고리의 다른 글
| [node] 노드 버전 확인과 설치된 npm 특정 버전 확인하는 방법 (0) | 2021.05.19 |
|---|---|
| [Vue]카카오톡으로 홈페이지 URL 공유하는 방법 (카카오톡 샘플 코드) (0) | 2021.05.12 |
| [Vue/Javascript] Vue에서 링크 복사 버튼 기능 구현 하기 (0) | 2021.04.27 |
| [Javascript] 자바스크립트에서 Class 사용하기-constructor, extends, super 사용법 (4) | 2020.12.28 |
| [JavaScript] 배열 메소드 map, filter 개념 및 예시 (배열 내 특정 조건에 해당하는 데이터 가져오는 방법) (1) | 2020.12.03 |