이벤트 전파 중지
.stopPropagation()과 .preventDefault()를 이해해 이벤트 흐름을 제어하고 브라우저의 기본 동작을 막으며 복잡한 이벤트 상호작용을 효과적으로 관리합니다.
이벤트 전파 중지은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
이벤트 제어하기!
클릭이나 양식 제출과 같은 이벤트는 하나의 요소에서만 발생하지 않습니다. 이러한 이벤트는 흔히 문서 객체 모델(Document Object Model, DOM)을 따라 전파됩니다.
이 흐름을 제어하는 방법을 익히는 것은 정밀하고 상호작용이 풍부한 웹 페이지를 만드는 데 중요합니다.
기본 동작 방지
브라우저는 많은 HTML 요소에 기본 동작을 제공합니다. 예를 들면 다음과 같습니다.
<a>태그를 클릭하면 새 페이지로 이동합니다.<form>을 제출하면 페이지가 다시 로드됩니다.
이러한 브라우저의 기본 동작을 중지하려면 event.preventDefault()를 사용합니다.
<code>preventDefault()</code> 실제 사용
아래 링크를 클릭해 보세요. 보통은 example.com으로 이동하지만, .preventDefault()가 해당 이동을 중지합니다!
<!DOCTYPE html>
<html>
<head>
<title>Prevent Default</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Prevent Default Example</h1>
<a href="https://example.com" id="myLink">Click Me! (Should not navigate)</a>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myLink').on('click', function(event) {
event.preventDefault(); // Stop the link from navigating
$('#output').append('<p>Link click prevented! You\'re still here.</p>');
});
});
</script>
</body>
</html>이벤트 버블링 이해하기
요소에서 이벤트(예: 클릭)가 발생하면 해당 요소의 핸들러만 실행되는 것이 아닙니다. 이벤트는 DOM 트리를 따라 위로 '버블링'됩니다.
- 먼저 해당 요소의 부모에서 핸들러를 실행합니다.
- 그다음 부모의 부모에서 실행합니다.
- 이런 방식으로
<body>와<html>까지 계속됩니다.
이러한 위쪽 전파를 이벤트 버블링이라고 합니다.
버블 중지하기: <code>stopPropagation()</code>
때로는 이벤트가 이벤트가 발생한 요소에서만 처리되거나, 특정 부모에서만 처리되고 더 높은 수준의 요소에는 영향을 주지 않기를 원할 수 있습니다.
이럴 때 event.stopPropagation()을 사용합니다. 이 메서드는 이벤트가 DOM 트리를 따라 더 위로 버블링되는 것을 중지합니다.
<code>stopPropagation()</code> 예제
내부 상자를 클릭해 보세요. stopPropagation()이 없으면 두 메시지가 모두 나타납니다. 사용하면 버블링이 중지되므로 내부 상자의 메시지만 나타납니다.
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#outer {
padding: 20px;
background-color: lightblue;
border: 1px solid blue;
margin: 10px;
}
#inner {
padding: 20px;
background-color: lightcoral;
border: 1px solid red;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Stop Propagation Example</h1>
<div id="outer">
Outer Div (Click me!)
<div id="inner">
Inner Div (Click me!)
</div>
</div>
<div id="log"></div>
<script>
$(document).ready(function() {
$('#outer').on('click', function() {
$('#log').append('<p>Outer Div clicked!</p>');
});
$('#inner').on('click', function(event) {
event.stopPropagation(); // Stop bubbling here
$('#log').append('<p>Inner Div clicked!</p>');
});
});
</script>
</body>
</html>버블링 중지의 실제 활용
stopPropagation()은 다음과 같은 상황에서 유용합니다.
- 모달 대화 상자: 오버레이 클릭을 유발하여 모달 내부 클릭으로 모달이 닫히는 것을 방지합니다.
- 중첩 드롭다운: 부모를 클릭해도 자식 드롭다운이 열린 상태로 유지되게 합니다.
- 복잡한 사용자 인터페이스 구성 요소: 특정 구성 요소의 이벤트 핸들러가 전역 리스너와 충돌하지 않도록 합니다.
이벤트 객체
.preventDefault()와 .stopPropagation()은 모두 이벤트 객체의 메서드입니다. 이 객체는 이벤트 핸들러 함수에 인수로 전달됩니다.
이벤트 객체에는 발생한 이벤트의 유형, 대상 요소, 마우스 좌표 등 유용한 정보가 많이 포함되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Event Object</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h1>Event Object Properties</h1>
<button id="myButton">Click Me</button>
<div id="output"></div>
<script>
$(document).ready(function() {
$('#myButton').on('click', function(event) {
$('#output').empty(); // Clear previous output
$('#output').append('<p>Event Type: <code>' + event.type + '</code></p>');
$('#output').append('<p>Target Element ID: <code>' + event.target.id + '</code></p>');
$('#output').append('<p>Mouse X Position: <code>' + event.pageX + '</code></p>');
$('#output').append('<p>Mouse Y Position: <code>' + event.pageY + '</code></p>');
});
});
</script>
</body>
</html>두 메서드 함께 사용하기
때로는 .preventDefault()와 .stopPropagation()을 모두 사용해야 합니다. 두 메서드는 서로 다른 문제를 해결합니다.
.preventDefault(): 브라우저의 기본 동작을 중지합니다..stopPropagation(): 이벤트가 DOM을 따라 위로 전파되는 것을 중지합니다.
예를 들어 복잡한 구성 요소 안의 버튼은 기본 클릭 동작을 방지하는 동시에 클릭으로 인해 부모 핸들러가 실행되는 것도 중지해야 할 수 있습니다.
이벤트 제어 이해하기
div <div id="container"> 안에 링크 <a href="#" id="link">가 있습니다. 링크가 다른 곳으로 이동하는 것을 방지하고, 클릭 이벤트가 #container의 핸들러를 실행하는 것도 방지하려고 합니다.
복습: 이벤트 제어
잘하셨습니다! 이벤트 흐름을 제어하는 방법을 익히셨습니다.
.preventDefault(): 이벤트에 대한 브라우저의 기본 동작(예: 링크 이동, 양식 제출)을 중지합니다..stopPropagation(): 이벤트가 DOM 트리를 따라 부모 요소로 버블링되는 것을 방지합니다.
이 강력한 메서드를 사용하면 웹 애플리케이션에서 이벤트 동작을 정밀하게 제어할 수 있으므로, 더욱 예측 가능하고 안정적인 사용자 경험을 만들 수 있습니다.
AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 22
- 레슨
- 48
자주 묻는 질문
“이벤트 전파 중지” 강의는 무료인가요?
네 — “이벤트 전파 중지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“이벤트 전파 중지”에서 뭘 배우나요?
.stopPropagation()과 .preventDefault()를 이해해 이벤트 흐름을 제어하고 브라우저의 기본 동작을 막으며 복잡한 이벤트 상호작용을 효과적으로 관리합니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
jQuery Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.
“이벤트 전파 중지” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 견고한 이벤트 위임 구현
- 이벤트 전파 중지
- 사용자 정의 이벤트 생성 및 트리거