728x90 반응형 프로그래밍118 [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. [HTML] form 태그 설명 및 예제 목 차1. 태그 기본 구조2. 태그의 주요 속성2-1. action2-2. method2-3. enctype2-4. target2-5. novalidate3. 폼 요소의 구성3-1. 입력 필드3-2. 버튼3-3. 드롭다운 메뉴3-4. 텍스트 영역4. 폼 데이터의 전송 흐름5. 폼 검증5-1. 기본 HTML5 검증5-2. 자바스크립트 커스텀 검증6. 고급 활용6-1. AJAX로 폼 데이터 전송6-2. multipart/form-data로 파일 업로드 1. 태그 기본 구조 Submit 2. 태그의 주요 속성 2-1. action폼 데이터를 전송할 서버의 URL을 지정합니다.기본값: 현재 페이지 URL ... 2-2. method 데이터를 전송하는 HTTP 메서드를 지정합니다.GE.. 2024. 11. 24. [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 20 다음 728x90 반응형