JS 이벤트 버블링

이벤트 버블링이란 물속에서 방울이 위로 올라가는 것 처럼 자식 요소의 이벤트가 실행될때,

부모 요소도 이벤트를 가지고 있으면 부모의 이벤트도 순서대로 실행되는 것을 말한다.

const button = document.querySelector('#changeColor');
const container = document.querySelector('#container');

container.addEventListener('click', function (e) {
     container.classList.toggle('hide'); // hide 클래스가 없으면 false, hide 클래스를 추가해준다.
})

button.addEventListener('click', function (e) {
    container.style.backgroundColor = makeRendColor();
    e.stopPropagation(); // 이벤트의 실행을 여기서 멈춰준다.
})

const makeRendColor = () => {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r},${g},${b})`;
}

위 코드는 button을 누르면 container의 backgroundColor가 랜덤한 색으로 바뀌는 코드인데, 

button의 부모 요소인 container에도 hide 클래스를 toggle하는 click 이벤트가 있기때문에, 이벤트 버블링으로 인해 button을 누르면 container의 click 이벤트도 실행된다.이것을 막기위해 button에 stopPropagation을 넣어주면 넣은 시점에서 이벤트는 부모 요소까지 가지 않고저기서 이벤트가 멈춘다.