이벤트 버블링

nn·2022년 5월 20일

이벤트 버블링

자식요소에서 발생된 이벤트는 부모를 통해 전파가 된다.
즉 하위 요소에서 상위 요소로 올라가게 된다.

<body>
    <div id ="box">
        <ul id = "list">
            <li id ="color">
                red
            </li>
        </ul>
    </div>
</body>

body -> div -> ul -> li 태그들이 부모와 자식 관계를 가지고 있다.

다음과 같이 각 요소가 클릭이 되었을 때 콘솔 로그를 출력해보자.

<script>
    const div = document.querySelector('div');
    const ul = document.querySelector('ul');
    const li = document.querySelector('li');
    document.body.addEventListener('click', () => {
        console.log("1 body")
    });
    div.addEventListener('click', () => {
        console.log("2 div")
    });
    ul.addEventListener('click', () => {
        console.log("3 ul")
    });
    li.addEventListener('click', () => {
        console.log("4 li")
    });
</script>