[자바스크립트] 이벤트 총정리 (이벤트 종류, 이벤트 핸들러와 리스너, 버블링과 캡처링을 이용한 이벤트 위임)

이벤트란?

• 사용자나 브라우저가 자바스크립트를 사용해서 HTML 페이지(정확히 말하면 DOM)를 조작하는 것
• 이벤트는 사용자의 액션에 의해 발생한다 (마우스 클릭, 키보드 누르기, 페이지 불러오기 등)
• 이벤트가 발생하면 함수에 연결되며 해당 함수는 이벤트가 발생되면 실행된다
• 이벤트는 웹문서 영역 안에서 이루어지는 동작만을 의미한다

 

이벤트 종류

1. 페이지 로딩 이벤트

속성	설명
load	페이지의 로딩이 끝났을때 이벤트 발생
unload	현재 페이지에서 다른 페이지로 이동할때 이벤트 발생
resize	페이지 크기가 변경되었을때 이벤트 발생
scroll	페이지 화면이 스크롤 되었을때 이벤트 발생
abort	페이지 로딩이 중간에 중단되었을때 이벤트 발생

2. 마우스 이벤트

속성	설명
click	요소에 마우스를 클릭했을때 이벤트 발생
dbclick	요소에 마우스를 더블클릭했을때 이벤트 발생
mousedown	요소 위에서 마우스를 누르는 동안 이벤트 발생
mousemove	요소 위에서 마우스를 움직일때 이벤트 발생
mouseover	마우스가 요소로 옮겨질때 이벤트 발생
mouseout	마우스가 요소에서 벗어날때 이벤트 발생
mouseup	요소에 마우스를 뗄때 이벤트 발생

3. 키보드 이벤트

속성	설명
keypress	키를 눌렀을 때 이벤트 발생 (입력할 수 있는 키보드가 눌렸을때만 반응 / Ctrl, Alt, Shift 키 작동 안함)
keydown	키를 눌렀을 때 이벤트 발생 (keypress 이벤트보다 더 권장되는 키보드 이벤트)
keyup	키를 떼었을 때 이벤트 발생

4. 폼 이벤트

속성	설명
focus	폼요소에 포커스가 생겼을때 이벤트 발생
blur	폼요소에 포커스가 사라질때 이벤트 발생
change	폼요소의 상태가 변경되었을때 이벤트 발생
reset	폼이 다시 시작되었을때 이벤트 발생
submit	submit 버튼을 눌렀을때 이벤트 발생

 

이벤트 등록

이벤트 등록이란?

• 이벤트가 발생했을때 실행하고 싶은 함수를 연결해주는 것을 이벤트 등록이라고 한다
• 이벤트에 연결해준 함수는 이벤트가 발생하기 전에는 실행되지 않다가(대기) 이벤트가 발생되면 실행된다(실행)

이벤트를 등록하는 두가지 방법

1. 이벤트 핸들러(이벤트 처리기)

• 이벤트와 이벤트 처리 함수를 연결해 주는 것을 이벤트 핸들러라고 한다
• 이벤트 이름에 on을 붙여주고 이벤트에 대한 동작(함수)을 처리한다
• 같은 이벤트 타입에 단 하나의 이벤트 핸들러 등록이 가능하다

예제

같은 이벤트 타입에 단 하나의 이벤트 핸들러 등록이 가능하므로 첫번째 이벤트 핸들러 onclick은 두번째 onclick에 덮어씌어지므로 두번째 이벤트 핸들러가 가지고 있는 함수만 실행된다

const button = document.querySelector("button")

button.onclick = () => {
  console.log("First event handler!");
};

button.onclick = () => {
  console.log("Second event handler!");
};

2. 이벤트 리스너

• 이벤트와 이벤트 처리 함수를 연결해 주는 것을 이벤트 핸들러라고 한다
• addEventListener 메소드를 사용해  이벤트에 대한 동작(함수)을 처리한다
• 이벤트 타입에 여러개의 이벤트 핸들러 등록이 가능하다

예제

같은 이벤트 타입에 여러개의 이벤트 핸들러 등록이 가능하므로 클릭 이벤트가 발생했을때 등록한 함수가 모두 실행된다

const button = document.querySelector("button")

button.addEventListener("click", () => {
  console.log("First event listener!");
});

button.addEventListener("click", () => {
  console.log("Second event listener!");
});

 

이벤트 등록 하는 3가지 방식

1. inline 방식

• 요소에 이벤트 핸들러를 등록해주는 방식

<button onclick="alert('Hello world');">Click Me</button>

2. property 방식

• 자바스크립트 파일에 요소를 불러온 후에 이벤트 핸들러를 등록해주는 방식
• HTML과 JavaScript를 분리할 수 있다는 장점이 있다

<button>Click Me</button>
<script>
const btn = document.querySelector('button');

btn.onclick = function() {
  alert('Hello world');
};
</script>

3. addEventListener 메소드 방식

• EventTarget의 메소드로 이벤트를 항상 리스닝(대기중)하다가 이벤트가 발생했을때 등록했던 이벤트 리스너(함수)가 실행된다
• removeEventListener로 등록된 이벤트를 삭제해줄수 있다
• 가장 권장되는 이벤트 등록 방식이다

문법

EventTarget.addEventListener(type, listener, useCapture);

• 첫번째 파라미터 (필수): 이벤트 종류 (문자열)
• 두번째 파라미터 (필수): 이벤트가 발생할때 실행될 함수
• 세번째 파라미터 (선택): 이벤트 캡처링 사용 여부
  • capture: false (default)
  • capture: true

예제

const button = document.querySelector("button")

button.addEventListener("click", () => {
  console.log("Hello World");
});

 

---

 

Reference

• [JS] 📚 자바스크립트 이벤트 💯 총 정리
• JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결
• 이벤트 리스너와 콜백(event listener, callback)
• MDN: Introduction to events
• MDN: EventTarget.addEventListener()
• Event Handlers vs Event Listeners in JavaScript
• [자바스크립트] 이벤트의 동작 원리
• 이벤트 버블링과 캡처링에 대한 정리
• 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지