이벤트 버블링이란? (+이벤트 버블링 중지하기 )

이벤트 버블링(Event Bubbling)이란

이벤트 버블링은 HTML 문서 내에서 이벤트가 발생한 요소에서 시작하여 상위 요소로 차례로 전파되는 현상을 말합니다. 예를 들어, 특정 버튼을 클릭했을 때, 해당 버튼의 이벤트가 발생한 후에 그 이벤트가 해당 버튼의 부모 요소, 그 부모의 부모 요소, 그리고 계속해서 상위 요소로 전파되는 것을 의미합니다.

<이벤트 버블링 막기 위한 방법>

1. stopPropagation 메서드 활용:

JavaScript의 stopPropagation 메서드를 사용하여 이벤트의 전파를 중지할 수 있습니다.
아래는 간단한 예시입니다.

document.getElementById('myButton').addEventListener('click', function(event) {
    event.stopPropagation();
    // 이벤트 핸들러 코드 작성
});

2. 캡처링 활용:

이벤트 캡처링을 이용하여 이벤트가 상위 요소에서 하위 요소로 전파되는 것을 막을 수 있습니다.
addEventListener 함수의 세 번째 매개변수를 true로 설정하여 캡처링을 활성화할 수 있습니다.

document.getElementById('myButton').addEventListener('click', function(event) {
    // 이벤트 핸들러 코드 작성
}, true);

3. 이벤트 위임 활용:

이벤트를 상위 요소에서 관리하고 필요한 처리를 하위 요소로 위임함으로써 이벤트 버블링을 효과적으로 제어할 수 있습니다.

document.getElementById('parentContainer').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        // 버튼에 대한 이벤트 처리
    }
});

4. jQuery를 활용한 방법:

jQuery를 사용하면 간편하게 이벤트 버블링을 막을 수 있습니다.

$('#myButton').click(function(event) {
    event.stopPropagation();
    // 이벤트 핸들러 코드 작성
});

위 방법들을 활용해 이벤트 버블링을 제어할 수 있으며, 상황에 따라 가장 적합한 방법을 선택하여 사용하시면 됩니다.