[javascript 자바스크립트] 이벤트 리스너 란?
resilient
·2021. 7. 27. 01:35
리액트를 복습하면서 이벤트 리스너에 대해서 다시 한번 정리해보려고 한다.
이벤트 리스너를 정리하기 전에 이벤트에 대해서 먼저 정리해보려고 한다.
동적인 웹 애플리케이션 구현을 위해서는 다양한 이벤트에 맞춰서 데이터를 핸들링해야 한다.
그러면 이벤트란 무엇일까?
어떤 사건을 의미한다.
ex) 특정 버튼을 클릭했을 때, DOM이 다 로드되었을 때
- 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용이 가능하다.
- 이벤트 핸들러를 통하여 이벤트가 발생 시 원하는 함수에 연결하여 실행시킬 수 있다.
DOM에서 특정 이벤트가 발생되면 우리는 자바스크립트 이벤트 객체에서 이를 확인할 수 있다.
그럼 이벤트 리스너란?
이벤트 리스너는 말 그대로 해당 이벤트에 대해 대기 중이다. 항상 Listen 하고 있다는 말이다.
DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다.
이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.
아래 예시를 보자. addEventListener로 이벤트를 붙일 수 있다.
on으로도 붙일 수 있지만 addEventListener을 사용하면 여러 이벤트를 등록할 수 있고, 제거할 수도 있기 때문에 addEventListener을 사용하는 게 더 좋다.
<html>
<a>클릭</a>
</html>
<script>
const a = document.querySelector('a');
a.addEventListener('click', ()=> {
console.log("콘솔로그 실행");
});
</script>
이벤트 리스너는 항상 on + '이벤트명'으로 명명된다.
DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다.
- onblur(객체가 focus를 잃었을 때),
- onchange(객체의 내용이 바뀌고 focus를 잃었을 때),
- onclick(객체를 클릭했을 때),
- ondblclick(더블클릭할 때),
- onerror(에러가 발생했을 때),
- onfocus(객체에 focus가 되었을 때),
- onkeydown(키를 눌렀을 때),
- onkeypress(키를 누르고 있을 때),
- onkeyup(키를 눌렀다 뗐을 때),
- onload(문서나 객체가 로딩되었을 때),
- onmouseover(마우스가 객체 위에 올라왔을 때),
- onmouseout(마우스가 객체 바깥으로 나갔을 때),
- onreset(Reset 버튼을 눌렀을 때),
- onresize(객체의 크기가 바뀌었을 때),
- onscroll(스크롤바를 조작할 때),
- onsubmit(폼이 전송될 때) 등이 있다.
이벤트 리스너는 웹 애플리케이션 메모리 누수의 원인이 될 수 있으므로 해당 이벤트 리스너가 필요 없어지면 반드시 삭제해줘야 한다.
이벤트 리스너를 삭제할 땐 removeEventListener을 이용한다.
아래 예시를 보자.
a.removeEventListener('click',this.showConsole);'Language > Javascript' 카테고리의 다른 글
| [javascript 자바스크립트] import 할때, 중괄호{} 가 있고 없고의 차이란? (2) | 2021.07.29 |
|---|---|
| [javascript 자바스크립트] this,window 란? (0) | 2021.07.27 |
| [javascript 자바스크립트] 모듈(Module) 란? (0) | 2021.07.23 |
| [javascript 자바스크립트] async/await 란? (0) | 2021.07.22 |
| [javascript 자바스크립트] Promise 프로미스 란? (1) | 2021.07.21 |
