왕진 블로그
반응형
Web Development · JavaScript
JavaScript 이벤트 객체와 이벤트 흐름
event 객체 프로퍼티와 캡처링·타깃·버블링 흐름을 함께 정리합니다.
시작 오늘 분석할 코드
이 예제는 이벤트가 발생했을 때 브라우저가 어떤 정보를 전달하고, 이벤트가 DOM 트리 안에서 어떤 순서로 이동하는지 보여줍니다. 또한 링크 이동이나 체크박스 선택처럼 브라우저가 기본으로 수행하는 동작을 취소하는 방법도 함께 다룹니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>이벤트 객체 프로퍼티</title> </head> <body> <h3>이벤트 객체의 프로퍼티 출력</h3> <hr> <p id="p">버튼을 클릭하면 이벤트 객체를 출력합니다.</p> <button onclick="f(event)">클릭하세요</button> <script> function f(e) { // e는 현재 발생한 이벤트 객체 let text = "type: " + e.type + "<br>" + "target: " + e.target + "<br>" + "currentTarget: " + e.currentTarget + "<br>" + "defaultPrevented: " + e.defaultPrevented; let p = document.getElementById("p"); p.innerHTML = text; // 이벤트 객체의 프로퍼티 출력 } </script> </body> </html> <!-- 다음 이벤트 예제 --> <!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>이벤트 흐름</title></head> <body> <p style="color:blue">이것은 <span style="color:red" id="span">문장입니다. </span> </p> <form> <input type="text" name="s"> <input type="button" value="테스트" id="button"> <hr> </form> <div id="div" style="color:green"></div> <script> let div = document.getElementById("div"); // 이벤트 메시지 출력 공간 let button = document.getElementById("button"); // body 객체에 캡쳐 리스너 등록 document.body.addEventListener("click", capture, true); // 켭쳐 단계(1) // 타겟 객체에 버블 리스너 등록 button.addEventListener("click", bubble, false); // 버블 단계(2) // body 객체에 버블 리스너 등록 document.body.addEventListener("click", bubble, false); // 버블 단계(3) function capture(e) { // e는 이벤트 객체 let obj = e.currentTarget; // 현재 이벤트를 받은 DOM 객체 let tagName = obj.tagName; // 태그 이름 div.innerHTML += "<br>capture 단계 : " + tagName + " 태그 " + e.type + "이벤트"; } function bubble(e) { // e는 이벤트 객체 let obj = e.currentTarget; // 현재 이벤트를 받은 DOM 객체 let tagName = obj.tagName; // 태그 이름 div.innerHTML += "<br>bubble 단계 : " + tagName + " 태그 " + e.type + "이벤트"; } </script> </body> </html>
실제 출력 미리보기
capture 단계 : BODY click 이벤트
bubble 단계 : INPUT click 이벤트
bubble 단계 : BODY click 이벤트
bubble 단계 : INPUT click 이벤트
bubble 단계 : BODY click 이벤트
용어 용어 정리
event클릭, 입력, 마우스 이동처럼 브라우저에서 발생한 사건을 나타냅니다.
target이벤트가 실제로 시작된 원래 요소입니다.
currentTarget현재 리스너가 실행 중인 요소입니다.
capture이벤트가 상위 요소에서 타깃으로 내려가는 단계입니다.
bubble이벤트가 타깃에서 상위 요소로 올라가는 단계입니다.
default action링크 이동, 체크박스 체크처럼 브라우저가 자동으로 수행하는 동작입니다.
1 이벤트 객체가 필요한 이유
왜 함수에 event를 넘길까?
리스너 함수가 실행되는 것만으로는 어떤 이벤트가 발생했고, 어느 요소에서 시작했으며, 기본 행동이 취소됐는지 알 수 없습니다. 이벤트 객체는 이런 정보를 한 번에 담아 전달합니다.
| 프로퍼티 | 의미 | 예제 결과 |
|---|---|---|
| type | 이벤트 종류 | click |
| target | 이벤트가 발생한 실제 요소 | button 또는 input |
| currentTarget | 현재 리스너가 붙은 요소 | body, button |
| defaultPrevented | 기본 행동 취소 여부 | true 또는 false |
2 target과 currentTarget 차이
target은 실제 클릭된 원래 요소이고, currentTarget은 지금 실행 중인 리스너가 등록된 요소입니다. 이벤트가 버블링되면 두 값이 달라질 수 있습니다.
target
이벤트의 출발점입니다. 사용자가 실제로 누른 버튼이나 span이 여기에 해당합니다.
currentTarget
현재 리스너가 처리 중인 요소입니다. 이벤트 흐름에 따라 body가 될 수도 있습니다.
3 이벤트 흐름 3단계
이벤트는 DOM 트리에서 바로 타깃만 실행하고 끝나는 것이 아니라, 상위에서 내려오고 타깃을 지나 다시 상위로 올라가는 흐름을 가질 수 있습니다.
캡처링
→
타깃
→
버블링
addEventListener의 세 번째 인자가 true이면 캡처 단계, false이면 버블 단계에서 리스너가 동작합니다.
반응형
4 캡처링과 버블링 등록
예제에서는 body에 캡처 리스너와 버블 리스너를 모두 등록하고, button에는 버블 리스너를 등록합니다. 버튼을 클릭하면 body 캡처, button 버블, body 버블 순서로 메시지가 쌓입니다.
document.body.addEventListener("click", capture, true); button.addEventListener("click", bubble, false); document.body.addEventListener("click", bubble, false);
이 순서를 이해하면 부모 요소에 이벤트를 한 번만 등록해서 자식 요소의 이벤트를 처리하는 이벤트 위임도 이해하기 쉬워집니다.
5 기본 행동 취소
링크는 클릭하면 href로 이동하고, 체크박스는 클릭하면 체크 상태가 바뀝니다. 이런 동작은 JavaScript를 쓰지 않아도 브라우저가 기본으로 수행합니다.
| 기본 행동 | 취소 방법 | 결과 |
|---|---|---|
| 링크 이동 | return false | 이동하지 않음 |
| 체크박스 선택 | preventDefault() | 체크 상태 변경 취소 |
| 폼 제출 | preventDefault() | 페이지 이동 없이 검증 가능 |
| 컨텍스트 메뉴 | preventDefault() | 우클릭 메뉴 차단 가능 |
6 confirm과 return false
링크 예제의 onclick="return query()"는 confirm 결과를 그대로 반환합니다. 확인을 누르면 true가 반환되어 링크가 이동하고, 취소를 누르면 false가 반환되어 이동하지 않습니다.
function query() { let ret = confirm("네이버로 이동하시겠습니까?"); return ret; }
인라인 이벤트에서 return을 빼면 함수가 false를 반환해도 기본 행동 취소로 연결되지 않을 수 있습니다.
7 preventDefault 사용 흐름
preventDefault()는 이벤트 전파 자체를 멈추는 것이 아니라 브라우저의 기본 행동만 막습니다. 이벤트 리스너는 실행되고, 필요하면 다른 리스너로 버블링도 이어질 수 있습니다.
1
이벤트 발생사용자가 링크나 체크박스를 클릭합니다.
2
리스너 실행onclick 또는 addEventListener로 연결된 함수가 실행됩니다.
3
기본 행동 취소e.preventDefault()가 호출되면 브라우저 기본 동작이 막힙니다.
4
상태 확인e.defaultPrevented 값으로 취소 여부를 확인할 수 있습니다.
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| target과 currentTarget을 같은 것으로 생각함 | 부모 리스너에서 엉뚱한 요소를 기준으로 처리합니다. | 이벤트 위임에서는 두 값을 반드시 비교합니다. |
| 캡처 인자를 잘못 설정 | 예상과 다른 순서로 메시지가 출력됩니다. | true는 캡처, false는 버블 단계입니다. |
| preventDefault를 전파 중단으로 오해 | 다른 리스너가 계속 실행되어 당황합니다. | 기본 행동 취소와 전파 중단을 구분합니다. |
| 인라인 onclick에서 return 생략 | false를 반환해도 링크가 이동합니다. | onclick="return 함수()" 형태로 작성합니다. |
| event 객체를 전달하지 않음 | preventDefault를 호출할 대상이 없습니다. | 인라인에서는 함수(event), 리스너에서는 매개변수를 받습니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 이벤트 객체 | type, target, currentTarget, defaultPrevented를 설명할 수 있습니다. |
| 이벤트 흐름 | 캡처링, 타깃, 버블링 순서를 구분합니다. |
| 리스너 등록 | 세 번째 인자의 true/false 의미를 압니다. |
| 기본 행동 | 링크 이동과 체크박스 선택이 기본 행동임을 압니다. |
| 취소 처리 | return false와 preventDefault의 적용 위치를 구분합니다. |
핵심 한 줄 요약
event object이벤트 객체는 발생 정보를 담고, 이벤트 흐름은 캡처링에서 타깃을 거쳐 버블링으로 이동합니다.
target이벤트가 실제로 시작된 요소입니다.
currentTarget현재 리스너가 실행 중인 요소입니다.
preventDefault이벤트의 기본 행동만 취소합니다.
Tags
#JavaScript #이벤트 #event object #target #currentTarget #capturing #bubbling #preventDefault #DOM #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, 이벤트, event object, target, currentTarget, capturing, bubbling, preventDefault, DOM, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript onload · eval 계산기 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 이벤트 취소 — preventDefault·return false 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 리스너 — 4가지 등록 방식 완전 정리 (0) | 2026.07.05 |
| JavaScript 동적 DOM — createElement·appendChild·removeChild 완전 정리 (0) | 2026.07.05 |
| JavaScript getElementsBy — ClassName·TagName·인라인 리스너 완전 정리 (0) | 2026.07.05 |
댓글