이벤트 버블링

부모 요소와 자식 요소 사이에서 자식 요소에 이벤트가 발생하면 부모 요소에도 이벤트가 전파된다

<style>
        .one {
            background: rgb(185, 75, 75);
            padding: 20px;
        }

        .two {
            background: #ccc;
            padding: 20px;
        }

        .three {
            background: rgb(109, 97, 97);
            padding: 20px;
        }

        .showResult {
            background: rgb(109, 97, 97);
            padding: 20px;
            margin-top: 50px;
        }
    </style>

    <div class="one">
        one
        <div class="two">
            two
            <div class="three">
                three
            </div>
        </div>
    </div>

    <div class="showResult"></div>

    <script>
        const one = document.querySelector(".one");
        const two = document.querySelector(".two");
        const three = document.querySelector(".three");
        const result = document.querySelector(".showResult")

        one.addEventListener("click", () => {
            console.log("one 클릭");
            result.innerHTML += "one 클릭";
        });

        two.addEventListener("click", () => {
            console.log("two 클릭");
            result.innerHTML += "two 클릭";
        });

        three.addEventListener("click", () => {
            console.log("three 클릭");
            result.innerHTML += "three 클릭"
        });
    </script>
    

결과

 

one

two

three

 

 

three를 클릭하면 two / one에도 영향을 주고

two를 클릭하면 one에도 영향을 one을 클릭하면 one 하나에만 영향을 받는다