이벤트 버블링 방지

😊 event.stopPropagation()

이벤트 버블링을 방지하는 데 사용되며
이벤트가 현재 요소에서 상위 요소로 전파되지 않도록 막는다
이를 통해 현재 요소에서의 이벤트만 처리하고 상위 요소로의 전파를 막을 수 있다

$('.child-element').click(function (event) {
    event.stopPropagation(); // 이벤트 상위로 전파 막음
	// 추가 동작~
});

---

😊 event.preventDefault()

기본 동작을 막는 데 사용된다
주로 링크나 폼 제출과 같은 특정 이벤트의 기본 동작을 막을 때 사용!
이것만으로는 이벤트 버블링을 막지 않는다

만약 이벤트 버블링과 함께 기본 동작도 막고 싶다면 두 메서드를 함께 사용하면 된다

---

😊 return false

를 사용하면 현재 이벤트의 기본 동작을 막고 이벤트 버블링을 막는다

$('#exampleLink').click(function (event) {
    // 기본 동작 막음
    event.preventDefault();

    // 이벤트 버블링 막음
    event.stopPropagation();

    // 또는 단축표현으로 return false; 사용
    // return false;는 preventDefault()와 stopPropagation()을 모두 수행
    return false;
});

🙌 주의점

이벤트의 상위 전파를 막으면 해당 이벤트가 발생한 요소의 상위로는 전파되지 않으므로
분석 시스템에서는 해당 영역이 감지되지 않는다 이는 분석의 정확성에 영향을 미칠 수 있다

만약 클릭 이벤트를 통한 사용자 행동 패턴을 분석하는 시스템에서
전체 페이지의 클릭 이벤트를 감지하고자 할 때
document.addEventListener('click', handler) 와 같이 사용하는 것이 일반이다
그러나 event.stopPropagation()을 사용하여 클릭 이벤트를 중단시킨 부분은 이벤트가 해당 부분에서만 감지되고 상위로 전파되지 않기 때문에 해당 영역에 대한 행동 패턴을 분석하기 어려워진다