폼 전송하기: submit 이벤트

submit 이벤트란?submit 이벤트는 사용자가 폼을 제출하려고 할 때 발생합니다. 주로 폼의 데이터를 검증하거나, 특정 조건에 따라 전송을 막을 때 사용합니다.폼이 제출되는 시점제출 버튼 클릭: 또는 요소를 클릭할 때.Enter 키 입력: 폼 내의 인풋 필드에서 Enter 키를 누를 때.이 두 경우 모두 폼의 submit 이벤트가 트리거됩니다.이벤트 핸들러에서의 검증submit 이벤트 핸들러에서는 폼 데이터의 유효성을 검증하고, 오류가 있을 경우 전송을 막을 수 있습니다. 이를 위해 event.preventDefault()를 사용합니다.const form = document.querySelector('form');form.addEventListener('submit', (event) => { ..

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

폼 데이터 변경 이벤트 조작하기

change 이벤트: 입력 완료 시점 감지change 이벤트는 주로 사용자가 입력 필드의 내용을 수정한 후 포커스를 잃거나, select, checkbox, radio 등에서 선택이 바뀔 때 발생합니다. 입력 완료 후 처리에 적합합니다. 약관 동의 상태: 미동의 input 이벤트: 실시간 값 변경 감지input 이벤트는 사용자가 키보드로 타이핑하거나 붙여넣기, 음성 입력 등 어떤 방법으로든 값이 수정되는 즉시 발생합니다.이벤트 핸들러 내에서는 현재 입력된 값을 실시간으로 반영할 수 있습니다. 텍스트 입력: 0/50 클립보드 이벤트: cut, copy, pastecut, copy, paste 이벤트는 사용자가 텍스트를 잘라내거나 복사, 붙여넣기 할 때 발생합니다.이벤트 객체의 clipboa..

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

포커스와 블러 이벤트

포커스와 블러 이벤트focus: 요소가 활성 상태가 되어 "데이터 입력 준비" 상태가 되었음을 알립니다. 사용자가 클릭하거나 Tab 키로 이동 시 트리거blur: 요소가 포커스를 잃을 때 발생합니다. 다른 요소로 이동하거나 창 밖을 클릭할 때 작동 이름: 포커스 제어하기자바스크립트를 사용하면 특정 조건에 따라 요소에 포커스를 주거나 제거할 수 있습니다. 예를 들어, 유효하지 않은 값이 입력되면 해당 필드에 다시 포커스를 주어 사용자가 바로 수정할 수 있도록 할 수 있습니다. 포커스 이벤트와 버블링 문제 해결기본적으로 focus와 blur 이벤트는 버블링되지 않습니다.캡처링을 이용한 방법캡처링 단계에서 이벤트를 처리하면 버블링 없이도 상위 요소에서 포커스와 블러를 감지할 수 있습니다..

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

폼 조작 하기

폼 탐색하기문서 내에 있는 모든 폼은 document.forms라는 기명 컬렉션(named collection)으로 관리됩니다.이름 접근: document.forms.myForm( 기준)인덱스 접근: document.forms[0](문서 내 첫 번째 폼)예제: 폼 데이터 간단 조회 폼의 요소는 form.nickname처럼 단축 표기법 또는 form.elements 컬렉션을 이용하여 접근할 수 있습니다.fieldset 활용: 구조화된 폼 관리폼은 요소를 포함할 수 있으며, 폼 내 그룹화를 지원합니다. 그리고 fieldset도 독자적인 elements 컬렉션을 제공합니다. 즉, 폼 내부에 있는 fieldset을 통해서도 하위 요소에 접근할 수 있습니다. 카드 정보..

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

스크롤 이벤트 제어

스크롤 이벤트 활용법스크롤 이벤트는 페이지나 특정 요소가 스크롤될 때마다 발생합니다. 이를 통해 현재 사용자가 페이지의 어느 위치에 있는지 파악하고, 그에 따라 동적인 콘텐츠를 제공할 수 있습니다.활용 예시동적 콘텐츠 표시: 사용자가 페이지의 특정 지점에 도달하면 추가 정보나 컨트롤을 표시합니다.무한 스크롤 구현: 사용자가 화면 하단에 도달하면 자동으로 새로운 데이터를 로드하여 끊김 없는 콘텐츠 제공이 가능합니다.window.addEventListener('scroll', () => { const scrollPosition = window.scrollY; document.getElementById('currentScroll').innerText = `현재 스크롤 위치: ${scrollPosition}..

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

키보드 이벤트: keydown과 keyup의 활용

keydown과 keyup의 작동 방식keydown키를 누르는 순간 발생하며, 누르고 있는 동안에는 자동 반복(auto-repeat) 현상이 발생할 수 있습니다.keyup키에서 손을 뗄 때 발생합니다. 반복없이 단일 이벤트로 처리됩니다.input 필드 내용 변경 추적키보드 이벤트보다 input 이벤트로 추적해야 합니다. keydown/keyup은 물리적 키 동작만 감지하기 때문에 input 이벤트는 사용자가 마우스나 음성 인식, 붙여넣기 등으로 값을 변경할 경우도 모두 감지할 수 있기 때문입니다.event.key와 event.code의 차이event.key실제 입력된 문자를 나타냅니다. 예를 들어, Shift를 누른 상태에서 "z"를 입력하면 event.key는 "Z"로 나타납니다. 사용자 언어 설정이나..

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