캡쳐링이벤트

JS 이벤트 플로우 완벽이해

html>body>button 의 부모자식관계를 가지는 html구조가 있다고 치자. 눌러주세요 각 요소들에 click event를 만들고, button을 click하면 어떻게 될까? 우리는 입장에서는 어려울 것 없이 button이 먼저 실행된다고 생각하지만 아니다. 엄밀히 말해 우리는 html안에있는 body안에있는 button을 누른것이기 때문에 브라우저 입장에서는 이 세가지중 정확히 무엇을 누른건지 애매하다고 생각하기 때문이다. 그래서 button에 클릭이벤트가 일어났을 때, 만약 부모요소에도 이벤트가 적용되어 있다면 이 경우 브라우저는 전부 다 실행을 시켜버린다. (body와 html에 클릭이벤트가 없으면 아무상관없는 이야기) 어떤 순서로? 아래 event flow 순서로! [이벤트가 실행되면 브..