40.6 이벤트 전파캡처링 단계: 이벤트가 상위 요소에서 하위 요소 방향으로 전파타깃 단계: 이벤트가 이벤트 타깃에 도달버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파 이벤트 어트리뷰트/프로퍼티 방식은 타깃 단계와 버블링 단계 캐치addEventListener 방식은 타깃 단계, 버블링 단계 캐치, 3 번째 인수로 boolean을 전달하여 캡처링 단계도 캐치할 수 있음 Event.prototype.composedPath이벤트가 통과하는 DOM 트리 상의 경로 버블링을 통해 전파되지 않는 이벤트- 포커스 이벤트: focus/blue -> focusein/fouceout- 리소스 이벤트: load/unload/abort/error- 마우스 이벤트: mouseenter/mouseleave ->..
[딥다이브] 40. 이벤트(1)
40.1 이벤트 드리븐 프로그래밍프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수이벤트 핸들러 등록: 이벤트 발생 시 브라우저에게 이벤트 핸들러 호출을 위임하는 것(이벤트 프로퍼티에 함수 할당) 40.2 이벤트 타입이벤트 종류를 나타내는 문자열마우스 이벤트이벤트 발생 시점click마우스 버튼 클릭dbclick마우스 버튼 더블 클릭mousedown마우스 버튼을 누를 때mouseup눌렀던 마우스 버튼을 놓을 때mousemove마우스 커서를 움직일 때mouseenter마우스 커서를 HTML 요소 안으로 이동할 때(버블링 X)mouseover마우스 커서를 HTML 요소 안으로 이동할 때(버블링 O)mouseleave마우스 커서를 HTML 요소 밖으로 이..
39.5 요소 노드의 텍스트 조작1. Node.prototype.nodeValuegetter, setter 모두 존재하는 접근자 프로퍼티라 참조와 할당 모두 가능노드 객체의 값(= 텍스트 노드의 텍스트) 반환텍스트 노드가 아닌 노드의 nodeValue를 참조하면 null 반환// Helloconst $foo = document.getElementById('foo');const $textNode = $foo.firstChild;$foo.nodeValue // null$textNode.nodeValue // Hello 2. Node.prototype.textContentgetter, setter 모두 존재하는 접근자 프로퍼티요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경(HTML 마크업..
39.1 노드1. HTML 요소와 노드 객체Hello시작 태그, 어트리뷰트 이름, 어트리뷰트 값, 콘텐츠, 종료 태그start tag, attribute name, attribute value, contents, end tag HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환됨요소 노드, 어트리뷰트 노드, 텍스트 노드 HTML 요소의 중첩 관계 반영하여 트리 자료구조 구성(비선형 자료구조)루트 노드: 부모 노드가 없는 최상위 노드리프 노드: 자식 노드가 없는 노드 노드 객체들로 구성된 트리 자료구조: DOM 2. 노드 객체의 타입총 12개 종류 중 중요한 4가지 문서 노드 document nodedocument 객체브라우저가 렌더링한 HTML 문서 전체를 가리키는 객체..
Node.js: 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행됨 파싱 parsing프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 토큰으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 파스 트리(트리 구조)를 생성하는 과정파싱이 완료된 이후 파스 트리를 기반으로 중간 언어인 바이트코드를 생성하고 실행(38.6 자바스크립트 파싱과 실행) 렌더링 renderingHTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것 브라우저 렌더링 과정1. 브라우저는 HTML, CSS, 자바스크립트, ..