이벤트 리스너란?
이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 매커니즘입니다.
예를 들어, click 이벤트가 발생하면 handleClick() 함수를 실행하도록 등록하는 것이 바로 이벤트 리스너를 등록하는 것입니다.
button.addEventListener("click", handleClick);- 위 코드는 버튼 요소에 "click" 이벤트 리스너를 등록한 것입니다.
이벤트 리스너는 함수인가?
이벤트 리스너에 대해 공부하면서
"이벤트 리스너가 함수인가?", "addEventListener()가 리스너인가?"
라는 의문이 들었습니다.
각 개념을 정리한 것은 다음과 같습니다.
- addEventListener() → 리스너를 등록하는 메서드
- function hadleClick() { ... } → 실제로 실행될 함수 = 이벤트 핸들러
- "click" + handleClick → 이벤트 리스너가 등록됨
즉, 이벤트 리스너는 함수가 아니라,
"어떤 이벤트가 발생하면 어떤 함수를 실행할지" 브라우저에 등록한 상태를 의미합니다.
| 용어 | 역할 | 차이 |
|---|---|---|
| 이벤트 리스너 | 특정 이벤트가 발생하면 어떤 함수를 실행할지 등록한 상태 | element.addEventListener("click", handler); |
| 이벤트 핸들러 | 이벤트가 발생했을 때 실제로 실행되는 함수 | function handler(e) { ... } |
이벤트 리스너의 등록 시점
이벤트 리스너는 addEventListener()가 실행되는 시점에 등록됩니다.
<button id="btn">Click me</button>
<script>
const btn = document.getElementById("btn");
// 이 코드가 실행되는 시점에 리스너 등록됨
btn.addEventListener("click", () => {
alert("clicked!");
});
</script>- HTML 렌더링 중
<script>가 실행되면서 리스너가 등록됩니다. - 이후 버튼을 클릭하면 등록된 함수(핸들러)가 호출됩니다.
매커니즘: 브라우저에서의 처리
element.addEventListener("click", handler);이 코드가 실행되면 브라우저는 다음을 수행합니다.
- "click" 이벤트를 감지하겠다고 등록
- 발생 시 실행할 함수로 handler를 연결
- 이후 "click" 이벤트가 발생하면 등록된 리스너를 찾아 handler()를 실행
즉, 다음과 같은 구조입니다.
[스크립트 실행]
→ addEventListener 실행됨
→ 이벤트 종류 + 핸들러가 브라우저 내부에 등록됨
[사용자가 click]
→ 브라우저가 리스너 테이블에서 등록된 핸들러를 찾아 실행이벤트 리스너 저장: 브라우저의 리스너 테이블
자바스크립트에서 addEventListener()를 호출하면 브라우저는 단순히 함수를 이벤트에 연결하는 것을 넘어서, 내부적으로 해당 정보를 특별한 자료구조에 저장합니다.
이 자료구조를 보통 이벤트 리스너 테이블이라고 부릅니다 (브라우저 구현에 따라 명칭은 다르지만, 개념적으로 이렇게 이해합니다).
리스너 테이블이란 브라우저가 관리하는 "이벤트 → 실행할 함수"의 연결 정보 목록입니다.
즉, 개발자가 element.addEventListener("click", handler)라고 쓰는 순간, 브라우저는 다음과 같은 정보를 테이블에 등록합니다.
{
target: element,
type: "click",
callback: handler,
options: {
capture: false,
once: false,
passive: false
}
}- 이 테이블은 브라우저가 이벤트가 발생했을 때, 어떤 요소에 어떤 이벤트가 등록되어 있었는가를 빠르게 찾기 위해 존재합니다.
리스너 실행 흐름 요약
1. 사용자가 클릭(Click) 같은 이벤트를 발생시킴
2. 브라우저는 해당 요소에서 위로 올라가며 리스너 테이블을 조회
3. "click" 이벤트에 대한 리스너가 등록되어 있다면
4. 등록된 함수(핸들러)를 찾아 실행함이 흐름은 캡처링 → 타겟 → 버블링 순서에 따라 적용됩니다.
정리
| 용어 | 의미 |
|---|---|
| addEventListener() | 리스너를 등록하는 메서드 |
| 이벤트 리스너 | 감지할 이벤트 + 실행할 함수가 연결된 상태 |
| 이벤트 핸들러 | 이벤트 발생 시 실행되는 함수 자체 |
| 등록 시점 | 스크립트가 실행되는 시점 |
| 실행 흐름 | 등록 → 대기 → 이벤트 발생 → 핸들러 호출 |
donggyun_ee