[Javascript] JS 이벤트 시스템, 어떻게 작동할까?

 

 

개요

Javascript는 사용자와의 상호작용을 감지하고 반응하기 위해 이벤트(Event)를 사용한다. 우리가 클릭을 하거나, 키보드를 누르거나, 스크롤을 내리는 모든 동작은 브라우저에서 "이벤트"로 감지되고, 자바스크립트가 이를 처리한다.

 

 

---

 

 

목차

1. 이벤트란 무엇인가?

 

• 정의와 예시
• 브라우저와 자바스크립트의 역할

2. 이벤트 리스너(Event Listner)의 등록 방식

 

• addEventListener vs HTML 속성(onclick 등)
• 이벤트 제거 방법

3. 이벤트 흐름(Event Flow)

 

• 캡처링(Capturing) → 타깃(Target) → 버블링(Bubbling)
• useCapture 옵션의 의미

4. 이벤트 객체(Event Object)

• 주요 속성: target, currentTarget, type, preventDefault(), stopPropagation()

5. 이벤트 위임(Event Delegation)

 

• 성능과 유지보수 측면에서의 장점
• 실전 예제

6. 커스텀 이벤트 만들기

• CustomEvent 생성과 디스패치

7. 정리 및 실전 팁

 

• 디버깅 팁
• 자주 겪는 실수와 해결 방법

 

---

 

 

1. 이벤트란 무엇인가?

이벤트(Event)는 사용자의 동작(인터렉션)에 반응하기 위해 브라우저에서 발생하는 신호이다.

 

예를 들어:

 

• 마우스를 클릭했을 때 → click 이벤트
• 키보드를 눌렀을 때 → keydown, keyup 이벤트
• 마우스를 움직일 때 → mousemove 이벤트
• 폼을 제출했을 때 → submit 이벤트

👉 브라우저는 이런 사용자 행동을 감지해서 자바스크립트에게 "이런 일이 발생했어!" 라고 알려준다.

 

 

 

2. 이벤트 리스너(Event Listener)의 등록 방식

이벤트 리스너는 이벤트가 발생했을 때 실행할 함수를 등록하는 방식이다.

 

1) addEventListner 사용 (추천 방식) ✅

const btn = document.querySelector("button");
btn.addEventListener("click", function () {
  alert("버튼 클릭됨!");
});

 

 

 

 

 

 

 

2) HTML 속성 방식

<button onclick="alert('버튼 클릭됨!')">클릭</button>

 

3) DOM 속성 방식

btn.onclick = function () {
  alert("버튼 클릭됨!");
};

❌ 주의 : 같은 이벤트를 여러 개 등록하려면 addEventListner를 사용해야 한다.

DOM 속성 방식은 기존 리스너를 덮어쓰기 때문에 하나만 동작한다.

 

다음과 같이 덮어써진다.

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");

  // 첫 번째 이벤트 핸들러 등록
  btn.onclick = function () {
    console.log("첫 번째 클릭 이벤트");
  };

  // 두 번째 이벤트 핸들러 등록 (이전 것을 덮어씀)
  btn.onclick = function () {
    console.log("두 번째 클릭 이벤트");
  };
</script>

이 경우, 버튼을 클릭하면 두 번째 클릭 이벤트만 출력된다. 첫 번째 onclick은 덮어써져서 무효화 된다.

 

 

 

3. 이벤트 흐름 (Event Flow)

자바스크립트의 이벤트는 3단계 흐름을 따라 전달된다.

 

1. 캡처링(Capturing) 단계

    이벤트가 window → document → ... → 타깃 요소까지 위에서 아래로 내려갑니다.

2. 타깃(Target) 단계

    실제 이벤트가 발생한 요소에서 이벤트가 실행됩니다.

3. 버블링(Bubbling) 단계

    이벤트가 타깃에서 다시 document까지 아래에서 위로 올라갑니다.

 

 

 

4. 이벤트 객체 (Event Object)

이벤트 리스너 함수는 이벤트 객체(event)를 인자로 자동으로 받는다. 이 객체 안에는 이벤트와 관련된 모든 정보가 담겨 있다.

btn.addEventListener("click", function (event) {
  console.log(event.type); // "click"
  console.log(event.target); // 클릭한 요소
});

주요 속성(프로퍼티) & 메서드 :

 

• event.target → 실제 이벤트 발생 요소
• event.currentTarget → 현재 리스너가 등록된 요소
• event.preventDefault() → 기본 동작 방지 (ex. 링크 이동, 폼 제출 등)
• event.stopPropagation() → 이벤트 전파 중지

 

 

 

5. 이벤트 위임 (Event Delegation)

이벤트 위임은 부모 요소에 이벤트 리스너를 걸고, 실제 타깃은 자식 요소에서 판별하는 기법이다. 이다.

 

사용하는 이유 :

 

• 동적으로 생성되는 요소도 처리 가능
• 이벤트 리스너 개수를 줄여 성능 개선

<ul id="list">
  <li>아이템 1</li>
  <li>아이템 2</li>
</ul>

 

 

document.getElementById("list").addEventListener("click", function (event) {
  if (event.target.tagName === "LI") {    // DOM에서 Element.tagName은 항상 대문자 문자열을 반환
    alert(event.target.textContent);
  }
});

이벤트 핸들러는 ul(부모)에 붙어있는데, 실제 클릭(event.target)은 자식요소인 li에서 일어났다.

 

 

 

6. 커스텀 이벤트 만들기

브라우저의 기본 이벤트 외에도, 개발자가 직접 정의한 이벤트(Custom Event)를 만들 수 있다.

const myEvent = new CustomEvent("myEvent", {
  detail: { message: "헬로 커스텀 이벤트!" }
});

element.addEventListener("myEvent", function (e) {
  console.log(e.detail.message); // "헬로 커스텀 이벤트!"
});

element.dispatchEvent(myEvent);

 

 

 

 

7. 정리 및 실전 팁

기억할 것들 : 

• 대부분의 이벤트는 버블링 단계에서 처리된다.
• 동적으로 요소가 생긴다면 이벤트 위임을 고려해야 한다.
• preventDefault(), stopPropagation() 은 필요할 때만 신중히 사용

디버깅 팁 :

 

• 콘솔 로그로 event.target, currentTarget 출력
• 개발자 도구의 Event Listeners 탭을 확인