본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

JavaScript 이벤트 취소 — preventDefault·return false 완전 정리

by 왕진 2026. 7. 5.
반응형

 

 

Web Development · JavaScript

JavaScript 이벤트 기본 행동 취소

링크 이동과 체크박스 선택 같은 브라우저 기본 동작을 조건에 따라 막습니다.
시작 오늘 분석할 코드

이 예제는 이벤트가 발생했을 때 브라우저가 어떤 정보를 전달하고, 이벤트가 DOM 트리 안에서 어떤 순서로 이동하는지 보여줍니다. 또한 링크 이동이나 체크박스 선택처럼 브라우저가 기본으로 수행하는 동작을 취소하는 방법도 함께 다룹니다.

<!DOCTYPE html> <html><head> <meta charset="UTF-8"> <title>이벤트의 디폴트 행동 취소</title> <script> function query() { let ret = confirm("네이버로 이동하시겠습니까?"); return ret; // confirm()의 리턴 값은 true 또는 false } function noAction(e) { e.preventDefault(); // 이벤트의 디폴트 행동 강제취소 } </script> </head> <body> <h3>이벤트의 디폴트 행동 취소</h3> <hr> <a href="http://www.naver.com" onclick="return query()"> 네이버로 이동할 지 물어보는 링크</a> <hr> <form> <input type="checkbox">빵(체크 됨)<br> <input type="checkbox" onclick="noAction(event)">술(체크 안됨) </form> </body> </html>
실제 출력 미리보기
네이버로 이동할 지 물어보는 링크

용어 용어 정리
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의 적용 위치를 구분합니다.

핵심 한 줄 요약

preventDefaultpreventDefault()는 이벤트는 발생시키되 브라우저가 원래 하려던 기본 행동만 취소합니다.
target이벤트가 실제로 시작된 요소입니다.
currentTarget현재 리스너가 실행 중인 요소입니다.
preventDefault이벤트의 기본 행동만 취소합니다.

Tags

#JavaScript #이벤트 #event object #target #currentTarget #capturing #bubbling #preventDefault #DOM #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, 이벤트, event object, target, currentTarget, capturing, bubbling, preventDefault, DOM, 티스토리
반응형

'php' 카테고리의 다른 글

JavaScript 마우스 이벤트 — 클릭·휠·좌표·우클릭 완전 정리  (0) 2026.07.05
JavaScript onload · eval 계산기 완전 정리  (0) 2026.07.05
JavaScript 이벤트 객체·흐름 — 캡처·버블링 완전 정리  (0) 2026.07.05
JavaScript 이벤트 리스너 — 4가지 등록 방식 완전 정리  (0) 2026.07.05
JavaScript 동적 DOM — createElement·appendChild·removeChild 완전 정리  (0) 2026.07.05

관련글

댓글

티스토리툴바