이벤트 위임: 효율적인 이벤트 관리

이벤트 위임의 작동 원리이벤트 위임은 DOM 이벤트의 버블링을 기반으로 합니다. 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 특성을 활용해, 개별 요소마다 리스너를 붙이지 않고 공통 조상에 하나의 핸들러를 등록합니다. event.target 속성을 통해 실제 이벤트가 발생한 요소를 식별하며, 이를 기반으로 적절한 동작을 수행합니다.예제: 리스트 항목 선택 홈 소개 연락처 내부의 각 에는 data-action 속성이 할당되어 있어, 어떤 동작을 수행할지 정보를 담고 있습니다.공통 조상인 menu 요소에 클릭 이벤트 핸들러를 등록하면, 이벤트 버블링을 통해 모든 의 클릭이 이 핸들러로 전달됩니다.event.target.closest('li')를 사용해 클릭된 요소가 직접 가..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms

이벤트 버블링과 캡처링

이벤트 전파 단계캡처링 단계이벤트가 최상위에서 시작해 타깃 요소로 내려갑니다.이 단계에 등록된 핸들러는 캡처링 리스너라고 부릅니다.타깃 단계이벤트가 실제 발생한 요소(이벤트 타깃)에서 처리됩니다.이때, 요소에 등록된 캡처링과 버블링 리스너 모두 실행됩니다.버블링 단계이벤트가 타깃에서 시작해 최상위로 다시 올라갑니다.이때 등록된 버블링 리스너가 실행됩니다.대부분의 경우 우리는 버블링 단계의 이벤트만 다루게 되지만, 특정 상황(예를 들어, 부모 요소에서 자식의 이벤트를 미리 가로채야 할 때)에는 캡처링 단계 리스너가 유용합니다.이벤트 버블링: 기본 전파 방식FORM DIV 여기를 클릭하세요 요소를 클릭하면:먼저 의 onclick 핸들러가 실행되어 "P 클릭됨"을 표시.이벤트가 로 버블링되어 "DI..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms

브라우저 이벤트: 웹 상호작용의 핵심

자주 사용되는 DOM 이벤트이벤트는 사용자의 행동이나 브라우저 상태 변화에 따라 발생하며, 이를 기반으로 웹 애플리케이션의 동작을 제어할 수 있습니다. 아래는 웹 개발에서 자주 활용되는 주요 DOM 이벤트들입니다.마우스 이벤트click: 요소에서 마우스 왼쪽 버튼을 클릭(터치스크린에서는 탭)했을 때 발생.contextmenu: 마우스 오른쪽 버튼을 클릭했을 때 발생.mouseover / mouseout: 마우스 커서가 요소 위로 들어오거나 나갈 때 발생.mousedown / mouseup: 마우스 버튼을 누르거나 뗄 때 발생.mousemove: 마우스가 움직일 때 발생.폼 이벤트submit: 사용자가 태그를 제출할 때 발생.focus: 같은 요소에 포커스가 맞춰질 때 발생.키보드 이벤트keydown ..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms

브라우저에서 요소 좌표 다루기

두 가지 좌표 체계창 기준 좌표브라우저 창(window)의 왼쪽 상단 모서리를 (0,0)으로 하는 좌표 체계clientX, clientY를 통해 접근 가능스크롤을 내려도 요소의 clientY 값이 변함position: fixed를 적용한 요소의 위치 계산과 유사문서 기준 좌표문서(document)의 왼쪽 상단 모서리를 (0,0)으로 하는 좌표 체계pageX, pageY를 통해 접근 가능스크롤을 내려도 요소의 pageY 값은 변하지 않음position: absolute 요소의 위치 계산과 유사document.addEventListener('click', function(event) { console.log(`창 기준 좌표: clientX=${event.clientX}, clientY=${event.c..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms

브라우저 창과 스크롤 이해하기: 웹 레이아웃의 숨겨진 영역

브라우저 창 크기 측정하기브라우저 창의 내부 영역(즉, 스크롤바가 차지하는 공간을 제외한 영역)을 알고 싶다면 document.documentElement.clientWidth 와 clientHeight 를 사용하면 됩니다. 이 값들은 현재 사용자가 실제로 볼 수 있는 페이지 영역의 너비와 높이를 픽셀 단위로 반환합니다. 한편, window.innerWidth 와 innerHeight 는 스크롤바의 공간까지 포함한 전체 창 크기를 반환합니다. 스크롤바가 있는 경우 두 값이 다르게 나타나므로, 화면에 실제로 콘텐츠를 렌더링할 영역을 알고 싶다면 document.documentElement의 client* 프로퍼티를 사용하는 것이 좋습니다.문서 전체 크기 측정하기문서 전체의 크기를 측정할 때는, 화면에 보..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms

DOM 기하학: 요소 크기와 스크롤의 상태

요소의 외부와 내부 크기 측정Offset 프로퍼티 offsetWidth와 offsetHeight는 요소의 전체 크기를 측정합니다. 여기에는 요소의 CSS width/height뿐만 아니라 패딩, 테두리(border) 등이 모두 포함됩니다. offsetLeft와 offsetTop은 요소의 위치를 계산할 때 기준이 되는 offsetParent를 기준으로, 요소가 오른쪽이나 아래쪽으로 얼마나 떨어져 있는지를 숫자 값(픽셀 단위)으로 제공합니다. 내부 콘텐츠 영역 측정Client 프로퍼티clientWidth와 clientHeight는 요소의 내부 영역 크기를 반환합니다. 이때 내부 영역은 패딩과 콘텐츠가 포함되지만, 테두리(border)와 스크롤바는 제외됩니다. 또한, clientLeft와 cl..

• format_list_bulleted 브라우저
• · 2025. 2. 20.
• textsms