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!')가 표시됩니다.

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

See the Pen bubble1 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

이벤트 버블링 방지

버블링을 막고 싶다면 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()을 사용하여 제어할 수 있습니다.

See the Pen bubble2 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

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() 있는 경우

See the Pen preventDefault by 이현석 (@loxshqac-the-styleful) on CodePen.

event.preventDefault() 없는 경우

See the Pen preventDefault2 by 이현석 (@loxshqac-the-styleful) on CodePen.

 

 

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() 있는 경우

See the Pen stopPropagation by 이현석 (@loxshqac-the-styleful) on CodePen.

event.stopPropagation() 없는 경우

See the Pen stopPropagation by 이현석 (@loxshqac-the-styleful) on CodePen.

 

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

'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)

관련글

티스토리툴바