본문 바로가기

Frontned Development/DOM

(2)
이벤트 캡쳐링, 이벤트 버블링, 이벤트 위임 (with react) 이벤트 캡쳐링 / 버블링정의 : - 이벤트 버블링 : 이벤트가 클릭한 하위요소에서 전파되어 부모까지 전달되는 현상- 이벤트 캡쳐링 : 이벤트가 클릭한 대상의 하위요소로 전파되는 현상, 기본적으로 off 상태로 사용되기 위해서 명시해야함 필요한 이유 : DOM의 특정 요소를 선택했을 때, 그 요소는 부모 내부에 있기에 이벤트를 상위와 하위로 전달하는 방법이 필요하다. 이 때, 사용되는 것이 이벤트 버블링과 캡쳐링이다. 이벤트 전파 순서 : (캡쳐링) -> 타겟 -> 버블링 캡쳐링과 버블링 중단하지만, 반대로 캡쳐링과 버블링으로 원하지 않는 요소에 이벤트가 전파되고 실행되어서 곤란할 수가 있다. 이를 해결위해서는 알맞게 이벤트를 전파하거나 이벤트의 흐름을 관리해야한다. 다음 요소들은 그를 위한 속성과 메서드..
[WEB] 돔(DOM)과 렌더링(Rendering) 글의 목적DOM이 무엇인지에 대해서 알고, 렌더링에 대해서 상세히 알아본다.렌더링 과정이 얼마나 부하가 걸리는 일인지를 이해한다. => 이를 통해서 VDOM이 왜 필요한 지 이해할 수 있을 것으로 생각된다. DOM정의 : 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.용도 : DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.구조 : nodes와 objects로 구성된다.발전사항 : 초창기 DOM은 JS와 밀접하게 연관되어 있었지만 지금은 분리해서..