[JavaScript] 자바스크립트 이벤트, 이벤트 핸들러, 버블링과 캡처링 등 총정리

내가 보려고 만든 이벤트 핸들러

 
🐦목표
이벤트, 이벤트 핸들러, 이벤트 버스 및 addEventListener에 대해 알아보자.
그리고 jQuery와 Vanilla JavaScript에서 이벤트를 다루는 법에 대해 알아보자.

---

 
다시 한 번 말하지만 jQuery는 한때 웹 개발에서 필수적인 라이브러리였지만, 이제는 Vanilla JavaScript(순수 JS)나 React, Vue, Svelte 같은 프레임워크가 대체하면서 사용이 줄어들고 있다. 그래서 addEventListener 위주로만 정리했고 순수하게 이벤트 종류만 궁금한 사람은 6번부터 읽으면 된다. 

---

 

1. 자바스크립트 이벤트 (JavaScript Event)

이벤트(Event)는 사용자나 시스템이 웹 페이지에서 일으키는 동작이다.
예를 들어, 버튼 클릭, 키보드 입력, 마우스 움직임 등이 모두 이벤트이다.
 
자바스크립트는 이 이벤트를 감지하고, 그에 대한 반응(작업)을 설정하는 프로그래밍 언어이다.
 
주요 이벤트 종류▼

• 사용자 입력 이벤트: click, keydown, keyup, mouseenter, focus, blur 등
• 폼 관련 이벤트: submit, change, input 등
• 마우스 이벤트: click, mouseover, mouseout, mousemove 등
• 문서 상태 이벤트: load, resize, scroll 등

 

2. 이벤트 핸들러 (Event Handler)

이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 콜백 함수이다.
자바스크립트에서는 addEventListener() 함수가 이벤트 핸들러가 실행되도록 하는 역할을 한다. 
 
아래는 click 이벤트가 발생하면, 해당 버튼에 지정된 이벤트 핸들러가 실행되어 알림창이 뜨는 예시 코드이다.

document.getElementById('myButton').addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

 
💡 콜백함수(Callback 함수)란?

콜백 함수는 다른 함수에 인자로 전달되어 실행되는 함수이다. 보통 비동기 처리나 이벤트 핸들링에서 사용되는데 어떤 함수가 끝난 후 실행될 작업을 콜백 함수로 넘겨주는 방식이다. 

 

3. JS의 addEventListener() 메서드

element.addEventListener(event, callback, useCapture);

• element: 이벤트를 걸고자 하는 DOM 요소
• event: 발생할 이벤트의 종류 (예: 'click', 'keydown', 'mouseover' 등)
• callback: 이벤트가 발생했을 때 실행할 이벤트 핸들러 함수
• useCapture (옵션): 이벤트 캡처링 단계에서 처리할지 여부 - 기본값은 false 임, 생략 가능 

---

4. jQuery의 .on() 메서드

순수 바닐라 자바 스크립트에서는 addEventListener()로 이벤트를 추가한다.
하지만 jQuery를 사용할 때는 .on() 메서드로 이벤트를 등록하고, 불필요한 이벤트는 .off()로 제거한다.
 
추후에 설명하겠지만 .on() 메서드는 이제 거의 쓰이지 않는다. addEventListener에 비해 단점이 많으며, 유연성이 떨어진다. 그래서 이벤트를 추가 할 때는 addEventListener을 사용하는 것이 권장된다. 그냥 제이쿼리에서는 on이 있다 정도로 이해하고 넘어 가는 것이 좋다. 

.on() 메서드

$('#btn').on('click', function() {
  $(this).css('font-size', '20px'); // 클릭 시 글자 크기 변경
});

$('#btn').on('mouseenter mouseleave', function() {
  $(this).toggleClass('hovered'); // 마우스를 올리면 클래스 추가/제거
});

 
⭐ 주의사항
동적으로 추가된 요소에도 이벤트를 적용하려면 반드시 부모 요소에 이벤트를 위임해야 한다. 

$(document).on('click', '.dynamic-btn', function() {
  alert('새로 추가된 버튼 클릭!');
});

 
이벤트를 위임한다는 것은 무엇인가?
 
예를 들어서 자바스크립트로 페이지 로드 후에 동적으로 추가된 버튼이 있다고 해 보자. 원칙적으로 이 버튼에 이벤트를 직접 등록하려면 해당 요소가 이미 존재해야 한다. 그렇지 않으면 이벤트를 등록할 수가 없다.
 
이때 이벤트 위임을 사용하면, 부모 요소에 이벤트를 등록하고 자식 요소에 이벤트가 발생했을 때 그 이벤트를 부모가 "대리"로 처리하게 할 수 있다.

<div id="parent">
  <button class="btn">버튼 1</button>
</div>

<script>
  // 동적으로 버튼 추가
  const newButton = document.createElement('button');
  newButton.className = 'btn';
  newButton.textContent = '버튼 2';
  document.getElementById('parent').appendChild(newButton);

  // 부모 요소에 이벤트 위임
  document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target && event.target.classList.contains('btn')) {
      alert(`${event.target.textContent} 클릭됨!`);
    }
  });
</script>

 
위 코드를 살펴 보자. 
 
#parent 부모 요소에 click 이벤트를 위임한 상태에서, event.target을 사용해서 실제 클릭된 요소가 .btn 클래스를 가지고 있는지 확인을 한다. if문을 살펴 보면 '만약 이벤트가 발생한 요소가 'btn' 클래스를 가지고 있다면, 그 요소의 텍스트 내용을 알림으로 출력하라.'는 코드이다. 예를 들어, "버튼 2"이라는 텍스트를 가진 버튼이 클릭되면, 알림창에 "버튼 2 클릭됨!"이 표시가 된다. 

이벤트가 발생한 요소를 이벤트 타겟(event.target)으로 확인해서, 부모 요소에 click 이벤트를 등록하고, 자식 요소가 클릭되면 부모에서 모든 자식 요소의 이벤트를 처리하게 되므로, 동적으로 추가된 요소에도 이벤트가 자동으로 적용되는 원리이다. 

.one() (이벤트 한 번만 실행)

$('#btn').one('click', function() {
  alert('이 버튼은 한 번만 클릭할 수 있습니다.');
});

 

.off() (이벤트 제거)

$('#btn').off('click');  // 클릭 이벤트 제거
$('#btn').off();         // 모든 이벤트 제거

---

5.  on과 addEventListener 차이점

addEventListener는 최신 웹 개발에서는 권장하는 방식이다. 요즘은 addEventListener이 압도적으로 우위를 점하고 있다는 사실에는 이견이 없다. 여러 핸들러를 등록할 수 있고, 리스너를 동적으로 추가/제거할 수 있으며. 이벤트 캡처링과 버블링 옵션을 세밀하게 제어할 수 있기 때문에 누가 봐도 addEventListener이 on 보다는 훨씬 뛰어나고 선호되는 방식이다. 

on은 구형 브라우저 호환성 때문에 간단한 이벤트 처리에 사용되는 정도이다. 하지만 공부를 하다가 on이 무엇인지, addEventListener 과의 차이가 무엇인지 궁금하신 분들이 있을 것 같아서 간단히 조사하여 포스팅을 하게 되었다.

5-1. 자바스크립트 역사 & 제이쿼리의 on 과 Vanilla JavaScript

 
■ 초기 JavaScript (1995~2000년대 초반

• on 이벤트 핸들러(onclick, onmouseover)가 주로 사용됨

■  DOM Level 2 (1998~2000년대 초반)

• addEventListener 등장, 여러 이벤트 핸들러를 한 요소에 등록 가능
• 구형 브라우저(IE)는 addEventListener를 지원하지 않아서 on 방식이 계속 사용됨

 
■  jQuery (2006년)

• jQuery에서 on 메서드를 사용해 이벤트 핸들링을 간편하게 제공.
• 여러 이벤트 핸들러를 등록할 수 있지만 성능상 addEventListener보다는 떨어짐.

 
■  Modern JavaScript (2010년대 후반 ~ 현재)

• addEventListener가 자리 잡음. 최신 브라우저에서 완벽하게 지원
• jQuery는 일부에서 여전히 사용되지만, addEventListener가 압도적으로 더 많이 쓰임
• 하지먼 jQuery의 on은 여전히 일부에서 사용되고 있음.

결론: addEventListener >>>>>>>> on 

---

6. 마우스 이벤트

웹 페이지에서 마우스와 관련된 이벤트는 크게 클릭, 이동, 버튼 동작 등으로 나눌 수 있다.

https://velog.io/@task11/Javascript-%EB%A7%88%EC%9A%B0%EC%8A%A4-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-and-drop

 

마우스 이벤트 종류 ( ❌ ✅ 는 자식 포함 여부)

 
click 마우스를 클릭했을 때 ❌
dblclick 마우스를 더블 클릭했을 때 ❌
contextmenu 마우스 우클릭 시 발생 ❌
mousemove 마우스가 이동할 때 ❌
mouseover 마우스가 요소 위로 올라왔을 때 ✅
mouseout 마우스가 요소에서 나갈 때 ✅
mouseenter 마우스가 요소 위로 올라왔을 때 ❌
mouseleave 마우스가 요소에서 나갈 때 ❌
mousedown 마우스를 눌렀을 때 ❌
mouseup 마우스를 뗐을 때 ❌
wheel 마우스 휠을 굴릴 때 ❌
 

6-1. 마우스 클릭 이벤트

• click 마우스를 클릭했을 때 발생 (왼쪽 버튼)
• dblclick 마우스를 더블 클릭했을 때 발생
• contextmenu 마우스 오른쪽 버튼 클릭 시 발생 (우클릭 메뉴)

const box = document.querySelector('.box');

box.addEventListener('click', function() {
  console.log('클릭 이벤트 발생!');
});

box.addEventListener('dblclick', function() {
  console.log('더블 클릭 이벤트 발생!');
});

box.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 기본 우클릭 메뉴 차단
  console.log('우클릭 메뉴 열기 방지!');
});

 
 

6-2. 마우스 이동 관련 이벤트

• mousemove 마우스가 요소 위에서 움직일 때 발생
• mouseover 마우스가 요소 위로 올라왔을 때 발생 (자식 요소 포함)
• mouseout 마우스가 요소에서 나갈 때 발생 (자식 요소 포함)
• mouseenter 마우스가 요소 위로 올라왔을 때 발생 (자식 요소 포함 안 함)
• mouseleave 마우스가 요소에서 나갈 때 발생 (자식 요소 포함 안 함)

const box = document.querySelector('.box');

box.addEventListener('mousemove', function(event) {
  console.log(`마우스 이동 중! X: ${event.clientX}, Y: ${event.clientY}`);
});

box.addEventListener('mouseover', function() {
  console.log('마우스가 요소 위로 올라왔어요!');
});

box.addEventListener('mouseout', function() {
  console.log('마우스가 요소 밖으로 나갔어요!');
});

 
 
✅ 차이점 

• mouseover / mouseout → 자식 요소에도 반응
• mouseenter / mouseleave → 자식 요소에는 반응 안 함

 

6-3. 마우스 버튼 및 휠 관련 이벤트

• mousedown 마우스 버튼을 눌렀을 때 발생
• mouseup 마우스 버튼을 뗐을 때 발생
• wheel 마우스 휠을 굴렸을 때 발생

const box = document.querySelector('.box');

box.addEventListener('mousedown', function() {
  console.log('마우스를 눌렀습니다!');
});

box.addEventListener('mouseup', function() {
  console.log('마우스를 뗐습니다!');
});

document.addEventListener('wheel', function(event) {
  console.log(`휠 스크롤 방향: ${event.deltaY > 0 ? '아래' : '위'}`);
});

 

---

7. 포커스 이벤트

입력 필드(input, textarea, select)나 버튼 등 포커스를 받을 수 있는 요소에서 발생하는 이벤트이다. 
 

포커스 이벤트 종류 (버블링 여부)

• focus 요소에 요소가 클릭되거나 탭으로 이동할 때 실행됨 ❌ (버블링 안 됨)
• blur 요소에서 요소가 다른 곳으로 포커스가 이동할 때 실행됨 ❌ (버블링 안 됨)
• focusin 요소에 포커스가 맞춰질 때 발생 (focus와 같지만 버블링 O) ✅
• focusout 요소에서 포커스가 빠질 때 발생 (blur와 같지만 버블링 O) ✅

7-1. focus / blur (버블링 X)

const input = document.querySelector('input');

input.addEventListener('focus', function() {
  console.log('입력 필드에 포커스가 맞춰졌습니다!');
});

input.addEventListener('blur', function() {
  console.log('입력 필드에서 포커스가 빠졌습니다!');
});

7-2. focusin / focusout (버블링 O)

const form = document.querySelector('form');

form.addEventListener('focusin', function(event) {
  console.log(`포커스가 들어온 요소: ${event.target.name}`);
});

form.addEventListener('focusout', function(event) {
  console.log(`포커스가 빠진 요소: ${event.target.name}`);
});

 
⭐ 그래서? 여러 요소에서 이벤트를 감지하려면 focusin, focusout울 사용하는 것이 좋다. 
 

7-3. tabindex

일반적으로 <button>이나 <input> 요소는에만 포커스가 적용되지만, tabindex="0" 속성을 추가하면 <div>, <span> 같은 요소도 포커스를 받을 수 있고, 포커스가 맞춰졌을 때 스타일 변경 가능

<div tabindex="0">이 DIV도 포커스를 받을 수 있어요!</div>

const div = document.querySelector('div');

div.addEventListener('focus', function() {
  div.style.backgroundColor = 'lightblue';
});

div.addEventListener('blur', function() {
  div.style.backgroundColor = '';
});

 

이벤트	설명	버블링 여부	언제써?
focus	요소에 포커스가 맞춰질 때	X	입력 필드 클릭
blur	요소에 포커스가 빠질때	X	입력 후 다른 곳 클릭
focusin	요소에 포커스가 맞춰질 때	O	폼 전체에서 포커스 감지
focusout	요소에 포커스가 빠질때	O	폼 전체에서 포커스 해제 감지

 

---

8. 키보드 이벤트

사용자가 키보드를 입력할 때 발생하는 이벤트
보통 입력 필드(input, textarea) 또는 문서 전체에서 단축키 기능을 구현할 때 사용됨
 

키보드 이벤트 종류 (버블링 여부)

• keydown을 주로 사용하고, 키 입력이 끝난 후 동작하려면 keyup을 사용
• event.key를 활용해 특정 키 감지 가능
• 단축키(Ctrl + S, Shift + A 등)를 만들 때 event.ctrlKey, event.shiftKey 사용

8-1. keydown & kepup

document.addEventListener('keydown', function(event) {
  console.log(`키다운: ${event.key} (${event.code})`);
});

document.addEventListener('keyup', function(event) {
  console.log(`키업: ${event.key} (${event.code})`);
});

• keydown: 키를 누르는 순간 발생
• keyup: 키를 뗄 때 발생
• event.key → 사용자가 입력한 키 (예: "a", "Enter", "Shift")
• event.code → 물리적인 키의 코드 (예: "KeyA", "Enter", "ShiftLeft")

 

8-2. Enter & Escape  

특정 키 감지해서 특정 동작 실행 가능

document.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('엔터 키를 눌렀습니다!');
  } else if (event.key === 'Escape') {
    console.log('ESC 키를 눌렀습니다!');
  }
});

 

8-3. 키 조합 (Ctrl + S, Shift + A 등)

특수 키(Ctrl, Shift, Alt, Meta)랑 조합하면 단축키 구현 가능함 
event.preventDefault()를 사용하면 기본 동작(브라우저 저장 등) 방지 가능함

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // 기본 동작(예: 브라우저 저장) 막기
    console.log('Ctrl + S 단축키가 눌렸습니다!');
  }
});

 

8-4. 입력 필드에서 실시간 입력 감지할 때 유용한 코드

const input = document.querySelector('input');

input.addEventListener('keydown', function(event) {
  console.log(`입력 중: ${event.key}`);
});

input.addEventListener('keyup', function(event) {
  console.log(`입력 완료: ${event.key}`);
});

---

9. 이벤트 플로우, 버블링과 캡쳐링, target

 

https://velog.io/@falling_star3/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81bubbling%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81capturing-event.TargetcurrentTarget

 
자바스크립트의 이벤트 플로우

https://velog.io/@90minyeong90/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BA%A1%EC%B2%98%EB%A7%81-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84

 
이벤트 플로우는 자바스크립트에서 이벤트가 어떻게 전달되는지 설명하는 방식이다. 

캡처링: 이벤트가 부모에서 자식으로 전달됨
타겟: 이벤트가 목표 요소에 도달하면, 그곳에서 처리가 시작됨
버블링: 이벤트가 자식에서 부모로 다시 전달된다. 

대부분의 경우 버블링이 기본으로 사용되지만, 캡처링 도 원할 때 addEventListener의 true 속성으로 설정할 수 있다. 

---

9-1. 버블링(Bubbling)이란?

이벤트가 발생한 요소에서 시작하여 상위 요소 (부모, 조상 요소)로 전파되는 현상이다.
 
예를 들어, <button>을 클릭하면 그 클릭 이벤트는 버튼 → 부모 <div> → <body> 순서로 상위 요소까지 전달된다.
아래 코드는 child 버튼을 클릭하면 부모 요소인 parent 까지 이벤트가 전달이 되는 예시코드이다. 

<div id="parent">
  <button id="child">클릭하세요</button>
</div>

<script>
  document.getElementById('parent').addEventListener('click', function() {
    console.log('👨 부모 div 클릭됨!');
  });

  document.getElementById('child').addEventListener('click', function() {
    console.log('👶 버튼 클릭됨!');
  });
</script>

 
이렇게 버블링을 활용하면 부모 요소에서 자식 요소의 이벤트를 감지할 수 있어 효율적이지만 반대로 버블링을 막아야 하는 경우도 생긴다. 버블링을 막으려면 `event.stopPropagation()`을 사용한다.

document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation();  // 부모 요소로 이벤트 전파 차단
  console.log('👶 버튼 클릭됨! (부모 이벤트 실행 안 됨)');
});

 

9-2. 버블링(Bubbling)을 방지해야 하는 경우

모달창을 예시로 들 수 있다. 모달을 닫을 방법으로는 보통 두 가지 방법이 있다. '닫기 버튼'을 클릭하거나, 모달 외부를 클릭해서 닫을 수 있다.
 
이 때, 모달 외부 클릭 시 닫는 동작을 설정하려면, 모달의 외부를 감싸고 있는 부모 요소인 #modal에 클릭 이벤트를 설정해야 한다. 이 이벤트로 모달 외부를 클릭하면 alert('모달이 닫혔습니다.')가 실행되고 모달이 닫히는 동작이 수행된다. 하지만 문제는 닫기 버튼으로 모달을 닫을 때 발생한다. 여기서, 만약에 닫기 버튼에 event.stopPropagation() 을 걸어 주지 않으면 버블링이 일어나서 모달이 닫히는 현상이 중복으로 2번 수행이 된다. 

<div id="modal">
  <div id="modalContent">
    <p>모달 내용</p>
    <button id="closeButton">닫기</button>
  </div>
</div>

// 모달 영역을 클릭하면 모달을 닫는 동작
document.getElementById('modal').addEventListener('click', function() {
  alert('모달이 닫혔습니다.');
});

// 닫기 버튼 클릭 시 부모 이벤트 전파 방지
document.getElementById('closeButton').addEventListener('click', function(event) {
  event.stopPropagation();  // 부모 이벤트 전파 방지
  alert('닫기 버튼 클릭됨');
});

 
 
또 submit 버튼으로 폼 제출을 할 때, 페이지가 리로드되는 것을 방지하는 용도로 event.preventDefault()를 사용한다.
 
회원가입 상황을 생각 해 보자. 사용자가 이름, 이메일, 비밀번호 등을 입력하고 제출 버튼을 클릭했는데, 문제가 생겨 페이지가 새로 고침되면 사용자가 다시 모든 정보를 입력해야 하는 상황이 생긴다. 

예를 들어, 비밀번호가 잘못 입력된 경우, 폼을 제출하고 오류 메시지를 실시간으로 표시하려면 페이지가 새로 고침되지 않아야 한다. 개발자는 단순히 잘못된 항목에 대한 오류 메시지를 화면에 표시해 주고, 사용자가 기존 입력값을 그대로 유지하고, 수정만 할 수 있도록 하는 것이 UX 측면에서 훨씬 더 깔끔하다.
 
event.preventDefault()와 AJAX를 함께 쓰면 서버와 데이터를 비동기적으로 교환하면서 페이지 리로드 없이 결과를 처리할 수 있기 때문에 사용자가 입력한 데이터를 다시 입력하고 검증을 받아야 하기 때문에 불편함을 겪지 않아도 된다.
 
(쓰다 보니 말이 어렵게 적혔는데 아래 코드로 확인 가능하다)

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();  // 페이지 리로드 방지

  // 비동기 데이터 처리 예시 (AJAX)
  const formData = new FormData(this);
  fetch('/submit', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => {
    console.log('폼 데이터 전송 성공', data);
  })
  .catch(error => {
    console.error('폼 제출 실패', error);
  });
});

---

9-3. 캡처링(Capturing)이란?

https://velog.io/@90minyeong90/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BA%A1%EC%B2%98%EB%A7%81-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84

반대로, 이벤트가 최상위 요소에서 시작하여 하위 요소로 전달되는 방식을 캡처링(Capturing)이라고 하는데 반대로 부모의 div의 click 이벤트가 실행되면, 자식의 이벤트도 실행되는 것이다. 하지만 캡처링은 잘 사용되지 않는다. 왜냐하면 기본적으로 브라우저는 버블링을 우선 사용한다. 이 부분은 잘 활용되지 않는 부분이므로 여기까지만 정리한다.

---

9-4. 타겟(target)이란?

target은 자바스크립트 이벤트 객체의 속성으로, 이벤트가 발생한 실제 DOM 요소를 참조한다. 주로 이벤트 핸들러에서 이벤트가 발생한 대상 요소를 알기 위해 사용되는 속성이다.
 
아래 코드에서event.target은 이벤트가 발생한 요소를 가리킨다. 그래서 myButton을 클릭하면 event.target은 바로 클릭된 버튼 요소를 반환한다. 

document.getElementById('myButton').addEventListener('click', function(event) {
  console.log(event.target);  // 클릭한 실제 요소가 출력됨
});

 
여러 자식 요소가 있을 때, 이벤트 위임이 일어나서 부모 요소에서 이벤트를 처리할 수 있다. 이때 event.target을 사용하여 실제 클릭된 자식 요소를 확인할 수 있다.

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('button')) {
    alert('버튼이 클릭됨!');
  }
});

---

10. 참고 자료

 

1. chatGPT에 궁금한 부분은 물어 가면서 포스팅을 작성했음
2. 포스팅 작성에 도움을 주신 블로그

 

[Javascript] 마우스 이벤트 / 드래그 앤 드롭 (Drag and drop)

[JS-중급편-이벤트] 3. 마우스 이벤트

이벤트 버블링과 이벤트 캡처링, 이벤트 위임