반응형 분류 전체보기50 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 44 (이벤트 전파, 이벤트 트리거 시퀀스, 이벤트 전파 방지, 이벤트 위임, 이벤트 리스너 제거) 목차이벤트 전파(Event Propagation)이벤트 트리거 시퀀스이벤트 전파 방지이벤트 위임(Event Delegation)이벤트 리스너 제거오늘 하루를 돌아보며 이벤트 전파(Event Propagation)이벤트가 발생하면 다음의 세 가지 단계가 순차적으로 발생하는데, 이것을 이벤트 전파(Event Propagation)라고 한다.캡처링 단계(Capturing phase)타겟 단계(Target phase)버블링 단계(Bubbling phase) 1. 캡처링 단계(Capturing Phase)JavaScript는 window → document → event target에 도달할 때까지 이벤트를 전파한다. 이벤트 리스너의 콜백에 세 번째 인수로 불리언 값을 제공하면 캡처링 단계를 수신할 수 있다.d.. 2025. 6. 30. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 43 (이벤트 청취 대상, 이벤트 기본 작동 방지) 목차이벤트 청취 대상이벤트 기본 작동 방지오늘 하루를 돌아보며 이벤트 청취 대상버튼을 클릭하면 배경 색상이 바뀌는 이벤트 리스너를 만들어 보자. 지금까지 배운 대로라면 아래처럼 작성했을 것이다.const button = document.querySelector('button')button.addEventListener('click', () => { button.style.setProperty('background-color', '#e54d26')}) 클릭(click) 이벤트를 리스닝(listening, 수신)하는 요소는 버튼(button)이다. 이벤트 리스너의 콜백(callback)을 별도로 분리해서 생성해도 코드는 정상적으로 작동한다.function handleChangeBgColor () { bu.. 2025. 6. 26. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 42 (요소의 크기와 위치 정보, DOM 탐색) 목차요소의 크기와 위치 정보DOM 탐색(Traversal)오늘 하루를 돌아보며 요소의 크기와 위치 정보요소의 너비나 높이 값을 알아야 할 때가 있다. 또는 문서에서 요소가 어디에 있는지 알아야 할 때도 있다. 그럴 때는 getBoundingClientRect() 메서드를 사용한다.const DOMRect = 요소.getBoundingClientRect() getBoundingClientRect() 메서드로 가져오는 DOM 요소의 Rect 정보는 아래와 같다.left (x 값과 같다)righttop (y 값과 같다)bottomwidth (right - left)height (bottom - top) DOM 탐색(Traversal)인접한 요소에서 하나의 다른 요소를 선택하는 것을 DOM 트래버서(Traver.. 2025. 6. 25. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 41 (빌트인 / 커스텀 속성 설정) 목차빌트인 속성과 커스텀 속성속성 설정 / 읽기 / 제거데이터 세트오늘 하루를 돌아보며 빌트인 속성과 커스텀 속성속성(attribute)은 HTML 요소에 추가된 값으로, 요소를 브라우저가 해석해서 DOM 요소 생성 과정에서 사용된다. HTML의 속성은 attributes라고 부르고, DOM의 속성은 properties라고 부른다. 모든 태그는 여러 개의 속성을 가질 수 있습니다! 위 코드에서 id, class, contenteditable 속성은 HTML이 기본으로 제공하는 빌트인 속성이다. 각 속성마다 쓰임새가 다르다. data-category 속성은 사용자가 정의한 커스텀(custom) 속성이다. 커스텀 속성을 사용하면 요소에 대한 정보를 임의로 사용자가 저장할 수 있다.커스텀 속성을 정의할 때는.. 2025. 6. 24. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 40 (여러 요소 선택, 노드 vs. 요소, 요소 선택하기, JS로 CSS 스타일 설정 및 읽기) 목차여러 요소 선택노드 vs. 요소요소 선택하기JavaScriipt로 CSS 스타일 설정JavaScript로 CSS 스타일 읽기오늘 하루를 돌아보며 여러 요소 선택문서에서 여러 요소(elements)를 선택해야 할 때가 있다. querySelectorAll() 메서드를 사용하면 CSS의 선택자를 문자열로 전달받고, 해당하는 모든 요소를 선택해서 NodeList로 반환한다. 반환 값은 유사 배열 객체다. 배열은 아니지만, 배열과 비슷한 객체다.const nodeList = element.querySelectorAll(selector) NodeList의 특정 요소에 접근하려면 숫자 타입의 키를 사용한다. 배열처럼 각 항목에 접근할 수 있다.const paragraphs = document.querySelec.. 2025. 6. 23. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
