동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다.
이러한 개념에서 javascript 이벤트 객체에 대해서 관심을 가질 필요가 있다.
DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다.
DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.
이벤트 리스너는 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)