웹사이트에서 일어나는 모든 상호작용은 ‘이벤트(Event)’라는 신호로 시작됩니다. 클릭, 스크롤, 마우스 이동, 입력 폼 전송 등 수많은 사건이 브라우저에서 발생하죠. 개발자의 역할은 이러한 신호를 감지하고 적절한 동작을 수행하도록 코드를 작성하는 것입니다. 오늘은 자바스크립트 이벤트 처리의 정석과 효율적인 관리 전략을 심도 있게 살펴보겠습니다! 😊
1. 이벤트 등록 방식: 과거에서 현재로 🏗️
자바스크립트에서 이벤트를 연결하는 방법은 발전해 왔습니다. 현대 웹 표준에서는 addEventListener 방식을 권장합니다.
- 인라인 이벤트 핸들러: HTML 태그 안에 직접
onclick="..."속성을 넣는 방식입니다. 관심사 분리가 되지 않아 유지보수가 매우 어렵습니다. - DOM 프로퍼티 방식: 자바스크립트에서
element.onclick = function형태로 할당합니다. 단순하지만 하나의 이벤트에 하나의 함수만 연결할 수 있다는 단점이 있습니다. - addEventListener (표준):
element.addEventListener('click', handler)방식입니다. 여러 개의 핸들러를 등록할 수 있고, 이벤트 전파 제어 등 옵션 설정이 자유롭습니다.
2. 이벤트 전파(Propagation): 버블링과 캡처링 📑
이벤트가 발생하면 단순히 그 요소에서 끝나는 것이 아니라 DOM 트리를 따라 전파됩니다. 이 원리를 이해해야 복잡한 UI 로직을 설계할 수 있습니다.
| 단계 | 동작 방식 |
|---|---|
| 캡처링 (Capturing) | 이벤트가 최상위 부모에서 실제 발생한 타겟 요소까지 내려가는 단계입니다. |
| 버블링 (Bubbling) | 타겟 요소에서 다시 최상위 부모까지 거품처럼 올라가는 단계입니다. 대부분의 이벤트 처리는 이 단계에서 일어납니다. |
3. 실무급 이벤트 제어 테크닉 💻
button.addEventListener(‘click’, (event) => {
event.preventDefault(); // 링크 이동 등 기본 동작 막기
event.stopPropagation(); // 부모로의 이벤트 전파(버블링) 차단
});
// 2. 일회성 이벤트 등록 (once 옵션)
target.addEventListener(‘click’, handler, { once: true });
// 3. 성능 최적화: 디바운싱(Debouncing) 간략 개념
// 스크롤이나 리사이즈처럼 빈번한 이벤트는 타이머를 이용해 실행 횟수를 조절해야 합니다.
🚀 Professional Event Checklist
Event Delegation
리스트 아이템마다 리스너를 달지 않고 부모 요소에서 위임 처리하고 있는가?
Clean Up
페이지를 벗어나거나 요소가 사라질 때 removeEventListener로 메모리를 해제하는가?
심층 Q&A ❓
target은 실제로 이벤트를 발생시킨 ‘가장 안쪽’의 요소를 가리키고, currentTarget은 이벤트 리스너가 실제로 ‘연결된’ 요소를 가리킵니다.preventDefault()를 호출하지 않을 것임을 미리 알려 스크롤 지연을 방지합니다.이벤트 처리는 사용자 경험(UX)의 최전선에 있는 기술입니다. 단순히 기능을 구현하는 것을 넘어, 이벤트 위임을 통한 최적화와 정확한 전파 단계의 제어를 이해한다면 훨씬 견고한 프론트엔드 아키텍처를 구축할 수 있습니다. 오늘 공유한 내용이 여러분의 실무 코딩에 큰 도움이 되길 바랍니다. 궁금한 점은 언제든 댓글로 남겨주세요! 😊