1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..
JavaScript/React 2022. 9. 2. 16:08
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
JavaScript 2022. 3. 16. 21:28
2022.03.07 - [HTML, CSS] - (2022. 3. 7.) document.addEventListener() 위 글에서 document.addEventListener는 document 내부에 있는 모든 요소에 대해 반응함을 알 수 있음. document 이벤트가 내부의 요소와 요소의 이벤트에 반응했던 이유는 이벤트 위임(Event Delegation) 때문. 1. 이벤트의 발생 단계 1. 캡처링 단계(Capture Phase): 이벤트가 DOM tree 하위 노드로 전파되는 단계 ※ addEventListener의 capture 옵션 기본값이 false이므로 캡처링 단계에서는 이벤트 발생되지 않음 2. 타겟 단계(Target Phase): 이벤트가 실제 타겟 노드에 전달되는 단계 * 타겟 ..