[자바스크립트] e.preventDefault(), e.stopPropagation() 이벤트 제어하기 (사용법, 예제, 차이점)

아래 소스코드는 e.preventDefault(), e.stopPropagation() 메서드를 활용해서 이벤트 처리에 대한 동작을 이해하고 확인하는 예제입니다.

 

 

e.preventDefault()

ㅇ 이벤트의 기본 동작을 막을 때 사용됩니다.

ㅇ <a> 태그의 링크 이동을 e.preventDefault() 사용해서 이동을 막을 수 있습니다.

 

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault(); // 링크 클릭 시 기본 동작인 페이지 이동을 막음
});

 

e.stopPropagation()

ㅇ 이벤트의 전파를 중단시킵니다.
ㅇ 이벤트는 DOM 트리를 따라 상위 요소로 전파되는데, 이 메서드를 사용하면 현재 이벤트를 받은 요소에서의 전파가 중단됩니다. 하위 요소에서 같은 이벤트를 처리하지 않도록 하고 싶을 때 유용합니다.

 

document.querySelector('.parent').addEventListener('click', function(e) {
  e.stopPropagation(); // 상위 요소에서의 클릭 이벤트 전파 중단
});

document.querySelector('.child').addEventListener('click', function(e) {
  // 이 코드는 실행되지 않음, 부모 요소에서 전파가 중단됨
});

 

---

 

<a href="https://www.example.com" id="myLink">이 링크를 클릭하세요</a>

<div id="parentDiv" style="margin-top:50px;">
  <button id="childButtonWithStopPropagation">자식 버튼 (stopPropagation 적용)</button>
  <button id="childButtonWithoutStopPropagation">자식 버튼 (stopPropagation 미적용)</button>
</div>

<script>
document.getElementById('myLink').addEventListener('click', function(e) {
  e.preventDefault(); // 링크 클릭 시 기본 동작인 페이지 이동을 막음
  alert('링크 클릭 이벤트가 발생했습니다.');
});

document.getElementById('parentDiv').addEventListener('click', function() {
  alert('부모 요소 클릭 이벤트');
});

document.getElementById('childButtonWithStopPropagation').addEventListener('click', function(e) {
  e.stopPropagation(); // 이벤트 전파 중단
  alert('자식 버튼 (stopPropagation 적용) 클릭 이벤트');
});

document.getElementById('childButtonWithoutStopPropagation').addEventListener('click', function() {
  alert('자식 버튼 (stopPropagation 미적용) 클릭 이벤트');
});
</script>

 

위 예제코드는 e.preventDefault() 이벤트로 인해 링크의 기본 동작인 페이지 이동을 막고 대신에 알림 창을 띄우며, e.stopPropagation()을 사용할 때는 이벤트 전파를 중단하고 자식 버튼의 클릭 이벤트만 처리한 후 알림 창을 표시합니다. e.stopPropagation()을 사용하지 않을 때는 이벤트가 전파되어 부모 요소의 클릭 이벤트도 처리한 후 알림 창을 표시합니다.

 

 

페이지 화면

 

 

링크 클릭시 페이지 이동막음

 

 

stopPropagation 적용 (이벤트 전파 중단)

 

 

stopPropagation 미적용 (부모요소 까지 클릭됩니다)