JavaScript에서 event.stopPropagation과 event.preventDefault의 차이점
이 기사에서는 stopPropagation()의 목적과 JavaScript 소스 코드에서의 작업에 대해 알아봅니다. 또한 stopPropagation() 이벤트를 사용하여 JavaScript에서 전파를 방지하는 방법도 살펴봅니다.
전파의 개념
웹 개발에서 DOM은 서로 관련된 요소(부모, 자식 및 형제)를 포함하는 트리로 간주됩니다. 전파는 DOM(문서 개체 모델) 트리를 통해 이동하는 이벤트의 개념입니다.
전파를 더 잘 이해하기 위해 전류 흐름이 정의된 목적지에 도달할 때까지 와이어에서 실행되는 전선을 예로 사용합니다. 이벤트는 마지막 노드에 도달할 때까지 DOM의 모든 노드를 통해 전달됩니다.
전파 단계
이벤트 버블링 및 캡처는 전파 단계입니다. 간단히 말해서 Bubbling은 대상 노드에서 루트로 이동하고 Capturing은 반대로 Bubbling으로 이동합니다. 루트 노드에서 대상으로 이동합니다.
버튼 클릭과 같은 이벤트를 트리거하는 데 사용되는 DOM 노드를 대상이라고 하며 클릭 이벤트가 있는 버튼을 이벤트 대상이라고 합니다.
JavaScript의 stopPropagation()
기본 전파 동작에서 버튼을 클릭하면 그 과정에서 동일한 유형과 연결된 모든 단일 이벤트 핸들러가 트리거됩니다. 이러한 종류의 동작은 실현 가능하지 않으며 성능 문제를 일으킵니다.
DOM 트리를 통한 이러한 전파 동작을 방지하기 위해 stopPropagation() 이벤트를 사용합니다. 해당 이벤트를 사용하여 트리거된 유일한 이벤트 핸들러를 실행할 수 있습니다.
기본 구문:
event.stopPropagation()
stopPropagation() 메서드는 동일한 이벤트의 전파 동작이 호출되는 것을 방지하는 데 사용됩니다.
예제 코드:
<!DOCTYPE html>
<html>
<body>
<style>
.myDiv {
border: 2px outset black;
padding: 30px;
text-align: center;
}
</style>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript stop propagation event</h3>
<p>Click on CHILD DIV</p>
<div class="myDiv" onclick="parentFunction()">
PARENT DIV
<div class="myDiv" onclick="childFunction(event)">CHILD DIV</div>
</div>
Prevent Propagation:
<input type="checkbox" id="check">
<script>
function childFunction(event) {
console.log("Child div event executed ..");
if (document.getElementById("check").checked) {
event.stopPropagation(); // preventing propagation
}
}
function parentFunction() {
console.log("Parent div event executed ..");
}
</script>
</body>
</html>
전파가 있는 출력:
전파 없는 출력:
위의 HTML 소스에서 우리는 Parent div 내부에 Child div를 생성했고 해당 div의 onClick 이벤트에서 별도의 함수를 호출했습니다.
<script> 태그에서 parentfunction() 및 childFunction()을 선언하여 실행된 이벤트를 로그에 표시했습니다. childFunction()에서 event를 인수로 전달하고 해당 이벤트를 사용하여 전파를 중지했습니다.
전파 방지를 원하는지 여부에 따라 사용자로부터 현재 상태를 가져오는 체크박스 요소를 만들었습니다. childFunction()에서 조건문을 사용하여 확인란이 선택되었는지 여부를 확인합니다.
체크되어 있으면 event.stopPropagation();을 호출합니다. 전파를 방지하기 위해. 사용자가 확인란 선택과 함께 CHILD DIV를 클릭하면 childFunction()만 실행됩니다. 그렇지 않으면 두 기능이 모두 실행됩니다.
위의 소스를 HTML 확장자로 저장하고 브라우저에서 엽니다. 결과를 보려면 콘솔 탭과 함께 디버거 모드를 엽니다.
JavaScript의 preventDefault()
event.stopPropagation() 메서드는 링크 클릭 또는 확인란과 같은 HTML 요소의 기본 동작을 중지하는 데 유용하지 않습니다. 이를 달성하기 위해 event.preventDefault()를 사용할 수 있습니다.
브라우저가 해당 이벤트에 대해 수행하는 기본 작업을 방지합니다. 따라서 preventDefault() 메서드를 사용하면 브라우저의 기본 작업만 금지되지만 div의 클릭 핸들러는 계속 트리거됩니다.
예제 코드:
function childFunction(event) {
console.log('Child div event executed ..');
if (document.getElementById('check').checked) {
event.preventDefault(); // preventing default action
}
}
위의 JavaScript 함수 childFunction()에서 event.stopPropagation()을 event.preventDefault()로 대체하여 로그의 동작 차이를 확인했습니다.