[ JS ] Event.stopPropagation와 Event.preventDefault 의 차이점 알아보기.

 

JavaScript에서 자주 사용되지만 종종 혼동되는 두 가지 메서드인 Event.stopPropagation()과 Event.preventDefault()에 대해 정리를 해보려고 한다.

 

 

 

---

 

 

Event.stopPropagation()

 

 

`stopPropagation()` 메서드는 이벤트의 버블링을 중지시킨다. 

 

 

element.addEventListener('click', function(event) {
    event.stopPropagation();
    // 이벤트 처리 로직
});

 

 

주요 특징 )

- 이벤트가 상위 요소로 전파되는 것을 막는다.
- 중첩된 요소에서 특정 이벤트를 독립적으로 처리하고 싶을 때 유용하다.

 

 

 

사용 예시 )

중첩된 div에서 클릭 이벤트가 발생했을 때, 해당 div에서만 이벤트를 처리하고 싶다면:

innerDiv.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('Inner div clicked!');
});

outerDiv.addEventListener('click', function() {
    console.log('Outer div clicked!'); // 이 코드는 실행되지 않는다.
});

 

 

 

---

 

Event.preventDefault()

 

`preventDefault()` 메서드는 이벤트의 기본 동작을 취소한다.

element.addEventListener('click', function(event) {
    event.preventDefault();
    // 커스텀 로직
});

주요 특징)
- 브라우저의 기본 동작을 막는다.
- 이벤트 자체는 계속 전파된다.

 

 

사용 예시)
링크 클릭 시 페이지 이동을 막고 싶다면:

link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('링크가 클릭되었지만, 페이지 이동은 발생하지 않는다.');
});

 

 

 

쉬운 비유로 이해하기

1. `stopPropagation()`: 방음벽
   - 이벤트(소리)가 다른 곳으로 퍼져나가는 것을 막는다.

2. `preventDefault()`: 자동차 브레이크
   - 이벤트의 기본 동작(자동차의 움직임)을 멈춘다.



`stopPropagation()`과 `preventDefault()`는 각각 다른 목적으로 사용되는 중요한 메서드로, 상황에 따라 둘 다 사용할 수도 있다. 이 두 메서드의 차이점을 이해하고 적절히 활용하여 이벤트 핸들링을 보다 효과적으로 할 수 있을것 같다. 

 

 

 

---

 

🌸 출처 🌸

 

eventPreventDefault - MDN

eventStopPropagation - MDN