동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다.
이러한 개념에서 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을 이용한다.
a.removeEventListener('click', this.showConsole)