728x90 프로그래밍/[javascript] 자바스크립트49 [JavaScript] 버블링(Bubbling)과 캡처링(Capturing) 목 차1. 버블링(Bubbling)이란?2. 이벤트 흐름의 단계2-1. 캡처링 단계 (Capturing Phase)2-2. 타깃 단계 (Target Phase)2-3. 버블링 단계 (Bubbling Phase)3. 버블링의 예제4. 버블링의 방지5. 버블링과 캡처링 비교 1. 버블링(Bubbling)이란? 버블링(Bubbling)은 DOM(Document Object Model) 이벤트 흐름의 한 단계로, 특정 요소에서 발생한 이벤트가 계층 구조 상위로 전파되는 과정을 말합니다. 즉, 이벤트가 발생한 요소에서 시작하여 그 부모 요소, 조상 요소로 계속 전파됩니다. 2. 이벤트 흐름의 단계 2-1. 캡처링 단계 (Capturing Phase)이벤트가 최상위 조상(보통 document 객체)에서부터 시작하.. 2024. 11. 25. [JavaScript] select()와 setSelectionRange() 메서드 목 차1. select 메서드와 setSelectionRange 메서드란?2. select 메서드2-1. 설명2-2. 문법2-3. 특징2-4. 예제3. setSelectionRange 메서드3-1. 설명3-2. 문법3-3. 특징3-4. 예제4. select 메서드와 setSelectionRange 메서드의 비교5. 고급 활용5-1. 텍스트를 추가 입력 시 특정 범위 강조하기5-2. 입력 필드에 텍스트를 자동 삽입 후 선택하기5-3. 사용자가 선택한 영역 가져오기 1. select 메서드와 setSelectionRange 메서드란?JavaScript의 select와 setSelectionRange 메서드는 입력 필드( 또는 )에서 사용자가 선택한 텍스트를 조작하거나 특정 범위를 설정하는 데 사용됩니다. 이.. 2024. 11. 25. [JavaScript] 자바스크립트 removeAttribute와 hasAttribute 설명 목 차1. removeAttribute 메서드와 hasAttribute 메서드란?2. removeAttribute2-1. 문법2-2. 특징2-3. 예제3. hasAttribute3-1. 문법3-2. 특징3-3. 예제 1. removeAttribute 메서드와 hasAttribute 메서드란?HTML 요소의 속성을 다룰 때, removeAttribute는 속성을 제거하고, hasAttribute는 특정 속성의 존재 여부를 확인하는 데 사용됩니다. 2. removeAttributeremoveAttribute는 HTML 요소에서 특정 속성을 제거합니다. 2-1. 문법element.removeAttribute(attributeName); attributeName : 제거할 속성의 이름(문자열, 대소문자를 구분.. 2024. 11. 23. [JavaScript] 자바스크립트 getAttribute와 setAttribute 설명 목 차1. getAttribute 메서드와 setAttribute 메서드란?2. getAttribute2-1. 문법2-2. 특징2-3. 예제3. setAttribute3-1. 문법3-2. 특징3-3. 예제 1. getAttribute 메서드와 setAttribute 메서드란?JavaScript에서 getAttribute와 setAttribute 메서드는 HTML 요소의 속성(attribute)을 동적으로 읽거나 설정할 때 사용됩니다. 두 메서드는 HTML 문서의 DOM 요소와 상호작용하여 속성을 관리합니다. 2. getAttributegetAttribute는 HTML 요소의 특정 속성 값을 가져옵니다. 2-1. 문법 element.getAttribute(attributeName); attributeNam.. 2024. 11. 22. [JavaScript] 자바스크립트 마우스 클릭 이벤트 목 차1. 마우스 클릭 이벤트란?2. 마우스 클릭 이벤트 종류2-1. mousedown2-2. mouseup2-3. click2-4. dblclick2-5. contextmenu 1. 마우스 클릭 이벤트란?JavaScript에서 마우스 클릭 이벤트는 사용자가 웹 페이지에서 마우스를 클릭했을 때 발생하는 이벤트입니다. 주로 click, mousedown, mouseup 등의 이벤트로 처리하며, 이벤트 핸들러를 사용해 특정 작업을 수행하도록 설정할 수 있습니다. 2. 마우스 클릭 이벤트 종류 2-1. mousedown설명 : 마우스 버튼을 누르는 순간 발생합니다.특징 : 클릭 후 버튼을 떼기 전에 발생합니다. (마우스 버튼을 눌러서 내려간 상태를 의미합니다.)document.addEventListener('.. 2024. 11. 21. [JavaScript] DOM 요소 선택 메서드 목 차1. DOM 선택 메서드 종류2. DOM 선택 메서드 설명2-1. document.getElementById2-2. document.getElementsByClassName2-3. document.getElementsByTagName2-4. document.querySelector2-5. document.querySelectorAll 1. DOM 선택 메서드 종류 메서드설명반환값getElementById특정 ID를 가진 첫 번째 요소를 선택단일 요소getElementsByClassName특정 클래스를 가진 모든 요소를 선택HTMLCollection (유사 배열)getElementsByTagName특정 태그 이름을 가진 모든 요소를 선택HTMLCollection (유사 배열)querySelectorC.. 2024. 11. 20. 이전 1 2 3 4 5 6 ··· 9 다음 728x90