# event flow

rookieand

📖 Introduction > 이벤트는 특정한 요소에만 정확히 발동되는 줄 알았던 과거의 나를 생각하며.. 이벤트 버블링, 이벤트 캡쳐링. 무슨 이벤트 하나에 이렇게 많은 단어들이 들어가는지 처음 JS에 입문하던 나로서는 이해할 수 없었다. 하지만 Vanilla JS로 직접 같은 카드 찾기 미니 게임을 구현했을 때 addEventListener 에서 얼마나 많은 고통을 받았었는가. 이번 포스팅은 그때의 나를 회상하며 다시금 이벤트에 대한 내용을 정리하였다. 과거의 나야, 왜 그때 이벤트 위임을 공부하지 않은 거니.. ✒️ Event flow ✏️ 3 Step of Event in DOM 특정 DOM 요소에 이벤트가 발생할 경우 이벤트는 아래와 같은 순서로 전파된다

kykim_dev

이벤트의 작동 원리를 알아야 이벤트를 제대로 쓸 수 있다! 김버그님의 DOM 강의를 듣고 학습한 내용입니다. 개괄 어떤 요소에서 이벤트가 발생했을 때, 그 이벤트를 전파하여 감지하는 흐름을 의미한다. HTML은 중첩된 구조(HTML -> body -> div)로 이루어져있다. 만약 우리가 div에 해당하는 event를 클릭한다면, div는 이벤트의 시발점(The Ultimate Cause)이 된다. 그러나 div를 감싸는 body, 그 상위에 html이 있기 때문에 body와 html 또한 이 이벤트를 감지한다. 또한, 부모들에게 같은 이벤트가 있다면 관계자들은 전원 실행이 되버린다. currentTagret vs target currentTarget : 이벤트의 직접적인 타겟

planethoon

JavaScript Event Flow 이벤트 플로우란? 이벤트 플로우, 이벤트 흐름이란 무엇일까. 평범하게 이런 html 코드가 있다고 가정해보자. > 상술한 코드에서 div요소가 클릭 되었을때(onclick)를 감지해서 함수가 실행되도록 코드를 짜고 div 요소를 클릭했을때, 만약 div의 상위 요소인 body와 html 등에도 클릭 이벤트 핸들러가 짜여 있다면 body와 html의 클릭을 감지하는 이벤트 핸들러는 어떻게 될까? 정답은 '사이좋게 실행된다.' 이다. 여기서 이벤트를 직접 실행시킨 div가 이벤트의 원인이되는 것이고, body와 html은 이벤트에 탑승했다고 한다. 그런데 우애 좋은 형제 사이에도 찬물 마실땐 위 아래가 있듯, 사이좋게 실행되더라도 먼저 실행되는 윗 놈(이벤트)이 있을 것이다. 이 이벤트들이 실행되는 순서를 사람들은 Event Flow라고 부른다. .target vs .