Java Script

[Java Script] Event Bubbling(preventDefault, stopPropagation)

웹개발자(진) 2024. 5. 28. 23:20
반응형
잡담

이벤트 버블링(Event Bubbling)은 이벤트가 발생했을 때 그 이벤트가 해당 요소에서 시작하여 부모 요소들로 차례차례 전파되는 과정을 말합니다. 예를 들어, 요소를 클릭하면 해당 요소뿐만 아니라 그 부모 요소들도 같은 클릭 이벤트를 처리할 수 있습니다.

 

 

이벤트 버블링의 예

아래 예제는 이벤트 버블링을 설명하는 간단한 HTML 및 JavaScript 코드를 보여줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Bubbling Example</title>
    <style>
        .grandparent, .parent, .child {
            padding: 20px;
            margin: 10px;
        }
        .grandparent {
            background-color: lightcoral;
        }
        .parent {
            background-color: lightblue;
        }
        .child {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="grandparent">
        Grandparent
        <div class="parent">
            Parent
            <div class="child">
                Child
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.grandparent').addEventListener('click', function() {
            alert('Grandparent clicked!');
        });

        document.querySelector('.parent').addEventListener('click', function() {
            alert('Parent clicked!');
        });

        document.querySelector('.child').addEventListener('click', function() {
            alert('Child clicked!');
        });
    </script>
</body>
</html>

예제 설명

  1. . child 요소를 클릭하면:
    • . child 요소의 클릭 이벤트 리스너가 실행되어 alert('Child clicked!')가 표시됩니다.
    • 그 후 이벤트는 부모 요소인. parent로 전파되어 alert('Parent clicked!')가 표시됩니다.
    • 마지막으로 이벤트는 최상위 부모 요소인 .grandparent로 전파되어 alert('Grandparent clicked!')가 표시됩니다.

즉, 이벤트가 가장 깊은 자식 요소에서 시작하여 부모 요소들로 전파되는 과정이 이벤트 버블링입니다.

 

 

이벤트 버블링 방지

버블링을 막고 싶다면 stopPropagation() 메서드를 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Bubbling Example with stopPropagation</title>
    <style>
        .grandparent, .parent, .child {
            padding: 20px;
            margin: 10px;
        }
        .grandparent {
            background-color: lightcoral;
        }
        .parent {
            background-color: lightblue;
        }
        .child {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="grandparent">
        Grandparent
        <div class="parent">
            Parent
            <div class="child">
                Child
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.grandparent').addEventListener('click', function() {
            alert('Grandparent clicked!');
        });

        document.querySelector('.parent').addEventListener('click', function() {
            alert('Parent clicked!');
        });

        document.querySelector('.child').addEventListener('click', function(event) {
            alert('Child clicked!');
            event.stopPropagation(); // 이벤트 버블링 방지
        });
    </script>
</body>
</html>

위 예제에서 .child 요소를 클릭하면 alert('Child clicked!')가 표시되고, event.stopPropagation()이 호출되어 이벤트가 부모 요소들로 전파되지 않습니다. 따라서 alert('Parent clicked!')와 alert('Grandparent clicked!')는 표시되지 않습니다.

이벤트 버블링은 여러 요소의 이벤트를 관리할 때 유용할 수 있지만, 필요에 따라 이벤트 전파를 막아야 할 때는 stopPropagation()을 사용하여 제어할 수 있습니다.

 

 

preventDefault()와 stopPropagation()는 JavaScript의 이벤트 처리 메서드로, 각각 이벤트의 기본 동작을 막고 이벤트가 상위 요소로 전파되는 것을 막는 역할을 합니다.

1. preventDefault()

preventDefault()는 이벤트의 기본 동작을 막는 메서드입니다. 예를 들어, 폼을 제출할 때 페이지가 리로드 되는 기본 동작을 막을 수 있습니다.

예제: 기본 동작 막기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preventDefault Example</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="name" placeholder="Enter your name">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 기본 동작 막기
            alert('Form submission prevented!');
        });
    </script>
</body>
</html>

위 예제에서 폼을 제출하려고 하면 페이지가 리로드되지 않고, 대신 "Form submission prevented!"라는 메시지가 표시됩니다.

 

event.preventDefault() 있는 경우

event.preventDefault() 없는 경우

 

 

2. stopPropagation()

stopPropagation()는 이벤트가 상위 요소로 전파되는 것을 막는 메서드입니다. 예를 들어, 클릭 이벤트가 부모 요소로 전달되지 않도록 할 수 있습니다.

예제: 이벤트 전파 막기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stopPropagation Example</title>
</head>
<body>
    <div id="parentDiv" style="padding: 20px; border: 1px solid black;">
        Parent Div
        <button id="childButton">Click Me</button>
    </div>

    <script>
        document.getElementById('childButton').addEventListener('click', function(event) {
            event.stopPropagation(); // 이벤트 전파 막기
            alert('Button clicked!');
        });

        document.getElementById('parentDiv').addEventListener('click', function() {
            alert('Parent div clicked!');
        });
    </script>
</body>
</html>

위 예제에서 버튼을 클릭하면 "Button clicked!" 메시지가 표시되고, 부모 요소의 클릭 이벤트는 실행되지 않습니다. stopPropagation()을 사용하지 않으면 버튼을 클릭할 때 부모 요소의 클릭 이벤트도 실행됩니다.

 

event.stopPropagation() 있는 경우

event.stopPropagation() 없는 경우

 

반응형
저작자표시 비영리 변경금지

'Java Script' 카테고리의 다른 글

[Java Script] Modal(모달) 생성  (0) 2024.06.23
[Java Script] DOM / audio객체, 동적 생성 및 제거  (0) 2024.04.24
[Java Script] DOM / setAttribute, getAttribute  (0) 2024.04.01
[Java Script] DOM / Input Control  (0) 2024.04.01
[Java Script] DOM / 기본 메서드  (0) 2024.04.01

'Java Script'의 다른글

  • 현재글[Java Script] Event Bubbling(preventDefault, stopPropagation)

관련글

티스토리툴바