[JavaScript] 이벤트핸들러(eventHandler)란? 이벤트 캡처링과 버블링
by 우와한개발자
1. 이벤트 Event
- 클릭, 마우스 올리기 등 사용자 행위로 발생하는 상호작용 신호
- HTML에서는 onxxx 형식으로 정의
2. 이벤트 핸들러
- 이벤트를 처리하는 함수
- HTML에서는 onxxx형식으로 정의(클릭→onclick)
1) 이벤트 핸들러 등록
- HTML 태그 속성으로 등록
<input onclick="handler()">
<script>
function handler(){ ... }
</script>
- 요소 객체 메서드로 등록
- 이벤트 중복 등록 불가 : 마지막 것만 실행
- 캡처링/버블링 설정 불가
- 이벤트 제거 불가
<script>
window.onload = function() {
document.getElementById("options").onclick = function() {...}
}
</script>
⚠️ window.onload를 사용하는 이유
- HTML 요소가 로드되기 전에 JS가 실행되면 요소를 못 찾기 때문
- (<script>태그가 HTML 요소보다 아래에 있으면 괜찮은데 <header>에 있으면 로드 전에 요소를 못찾음)
- addEventListener로 등록
- 이벤트 중복 등록 가능 : 여러 개 모두 실행
- 캡처링/버블링 설정 가능
- 이벤트 제거 가능 : removeEventListener 사용
<script>
window.onload = function() {
document.getElementById("options")
.addEventListener("click", function() {...});
}
</script>
2) 이벤트 핸들러 특징
- 이벤트 핸들러 함수는 인자로 event 객체가 자동 전달됨
- 이벤트 핸들러가 false를 반환하면 event.preventDefault()와 같음 (false반환 대신 preventDefault사용 지향)
3) 이벤트 캡처링과 버블링
- 캡처링 : 부모요소 → 자식요소 순으로 이벤트 실행
- 버블링 : 자식요소 → 부모요소 순으로 이벤트 실행
| 메서드 | 설명 |
| addEventListener(type, handler, useCapture) | 이벤트 등록 |
| removeEventListener(type, handler, useCapture) | 이벤트 제거 |
| event.stopPropagation() | 이벤트 전파 중단 |
- useCapture: true → 캡처링
- useCapture: false → 버블링 (기본값)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var elements = document.querySelectorAll("div");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function(event) {
console.log(this.getAttribute("id"));
event.stopPropagation();
}, true);
}
};
</script>
</head>
<body>
<div id="a">A영역
<div id="b">B영역
<div id="c">C영역
</div>
</div>
</div>
</body>
</html>
| useCapture 값 | stopPropagation 사용 | A클릭 | B클릭 | C클릭 |
| true | yes | a | a | a |
| true | no | a | a b | a b c |
| false | yes | a | b | c |
| false | no | a | b a | c b a |
- useCapture = true, stopPropagation() 사용하는 것이 권장됨
3. Event 객체
참고 https://developer.mozilla.org/ko/docs/Web/API/Event
1) 주요 속성과 메서드
| 속성/메서드 | 설명 |
| type | 발생한 이벤트 타입 ("click" 등) |
| target | 이벤트가 실제 발생한 요소 |
| currentTarget | 현재 핸들러가 등록된 요소 |
| bubbles | 버블링 이벤트면 true |
| cancelable | 기본 액션 취소 가능 여부 |
| eventPhase | 현재 전파 단계 (캡처링/타겟/버블링) |
| preventDefault() | 브라우저 기본 동작 취소 |
| stopPropagation() | 이벤트 전파 중단 |
2) 주요 이벤트
| 이벤트 | 설명 |
| onload | 문서 로드 완료 시 |
| onblur | 창 포커스 잃을 때 |
| onfocus | 창 포커스 얻을 때 |
| onresize | 창 크기 변경 시 |
| onerror | 에러 발생 시 |
| onoffline / ononline | 오프라인/온라인 전환 시 |
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 렉시컬(Lexical), 호이스팅(Hoisting), 클로저 (Closure) (0) | 2026.03.11 |
|---|---|
| [JavaScript] jQuery란? 주요 문법과 메서드, jQuery ajax (0) | 2026.03.11 |
| [JavaScript] ES6 문법 - 클래스, 화살표함수, 구조분해할당, 스프레드 (0) | 2026.03.11 |
| [JavaScript] 변수, 타입, 연산자, 제어문, 예외처리, 함수 (1) | 2026.03.11 |
| [JavaScript] DOM과 Selector API - Webkit 렌더링, DOM 구조, Selector API, HTML 파싱 타이밍 (0) | 2026.03.11 |
블로그의 정보
우와한개발자 님의 블로그
우와한개발자