🖱️
EPISODE 07
addEventListener · event 객체 · 버블링 · 위임
이벤트
addEventListener로 이벤트 등록, 자주 쓰는 이벤트(click/input/submit/keydown 등), event 객체의 target·key·preventDefault, 버블링, 그리고 이벤트 위임 패턴을 익힙니다.
JavaScripteventdelegation
소요 시간
⏱ 60분
난이도
📊 초보~중급
선수 조건
🎯 js-06
결과물
동적으로 추가되는 요소까지 안전하게 처리하는 이벤트 시스템
이 강의에서 배우는 것
- 1addEventListener / removeEventListener로 이벤트를 등록·해제한다
- 2click·input·submit·keydown·change 같은 자주 쓰는 이벤트를 안다
- 3event.target / event.key / preventDefault를 활용한다
- 4버블링을 이해하고 stopPropagation으로 막는다
- 5이벤트 위임 패턴으로 효율적인 핸들러를 작성한다
1. addEventListener
javascript
const btn = document.querySelector('#myBtn');
btn.addEventListener('click', (event) => {
console.log('클릭됨!', event.target);
});
// 이벤트 제거
function handleClick() { console.log('클릭'); }
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);2. 자주 쓰는 이벤트
| 이벤트 | 발생 시점 | 대상 |
|---|---|---|
| click | 마우스 클릭 | 버튼·링크·카드 |
| input | 값 변경 (실시간) | input·textarea |
| change | 값 변경 후 포커스 이탈 | select·checkbox |
| submit | 폼 제출 | form |
| keydown | 키 누름 | input·document |
| keyup | 키 뗌 | input |
| mouseover/mouseout | 마우스 진입/이탈 | 모든 요소 |
| focus / blur | 포커스 받음/잃음 | input |
| DOMContentLoaded | DOM 준비 완료 | document |
3. event 객체
javascript
document.addEventListener('keydown', (event) => {
console.log(event.key); // "Enter", "a", "ArrowUp"
console.log(event.code); // "KeyA", "Enter", "Space"
console.log(event.ctrlKey); // true/false
console.log(event.shiftKey);
});
// 폼 기본 동작 막기
document.querySelector('form').addEventListener('submit', (event) => {
event.preventDefault();
console.log('폼 처리');
});
btn.addEventListener('click', (event) => {
console.log(event.target); // 실제 클릭된 요소
console.log(event.currentTarget); // 이벤트가 등록된 요소
console.log(event.clientX, event.clientY); // 마우스 좌표
});4. 이벤트 버블링
html
<div id="outer">
<div id="inner">
<button id="btn">클릭</button>
</div>
</div>javascript
document.getElementById('btn').addEventListener('click', () => console.log('버튼'));
document.getElementById('inner').addEventListener('click', () => console.log('inner'));
document.getElementById('outer').addEventListener('click', () => console.log('outer'));
// 버튼 클릭 시: "버튼" → "inner" → "outer"
// 버블링 중단
document.getElementById('btn').addEventListener('click', (e) => {
e.stopPropagation();
});5. 이벤트 위임
부모 요소에 이벤트를 등록해 자식 요소들을 한꺼번에 처리. 동적으로 추가된 요소에도 자동 적용.
javascript
// 비효율: 각 버튼마다 등록
document.querySelectorAll('.item-btn').forEach(btn => {
btn.addEventListener('click', handleClick);
});
// 효율: 부모에 위임
document.querySelector('#list').addEventListener('click', (event) => {
if (event.target.classList.contains('item-btn')) {
const itemId = event.target.dataset.id;
console.log(`아이템 ${itemId} 클릭`);
}
if (event.target.classList.contains('delete-btn')) {
event.target.closest('.item').remove();
}
});