이벤트핸들러

JavaScript 이벤트 완벽 가이드 - 이벤트 핸들링 마스터하기 안녕하세요! 오늘은 웹 개발의 핵심인 JavaScript 이벤트에 대해 자세히 알아보겠습니다. 사용자의 클릭, 키보드 입력, 마우스 움직임 등 모든 상호작용은 이벤트를 통해 처리됩니다. 이 포스팅에서는 이벤트의 기본 개념부터 고급 활용까지 체계적으로 정리해보겠습니다! 이벤트란? 기본 개념 **이벤트(Event)**는 웹 페이지에서 발생하는 모든 상호작용을 의미합니다. 사용자의 마우스 클릭, 키보드 입력, 페이지 로드 등이 모두 이벤트입니다. 이벤트의 구성 요소 이벤트 타입: 어떤 종류의 이벤트인지 (click, keydown, load 등) 이벤트 타겟: 이벤트가 발생한 요소 이벤트 핸들러: 이벤트 발생 시 실행될 함수 주요 이벤트 타입들 1. 마우스 이벤트 이벤트 타입 설명 특징 click 마우스 클릭 가장 일반적인 클릭 이벤트 dblclick 더블 클릭 빠르게 두 번 클릭 mousedown 마우스 버튼 누름 버튼을 누르는 순간 mouseup 마우스 버튼 해제 버튼을 떼는 순간 mousemove 마우스 이동 커서가 움직일 때 mouseenter 요소 진입 요소 안으로 들어올 때 (버블링 없음) mouseover 요소 진입 요소 안으로 들어올 때 (버블링 있음) mouseleave 요소 이탈 요소 밖으로 나갈 때 (버블링 없음) mouseout 요소 이탈 요소 밖으로 나갈 때 (버블링 있음) 2. 키보드 이벤트 이벤트 타입 설명 특징 keydown 키 누름 키를 누르는 순간 keyup 키 해제 키를 떼는 순간 keypress 키 입력 문자 키 입력 시 (폐지됨) 3. 폼 이벤트 이벤트 타입 설명 submit 폼 제출 reset 폼 초기화 input 입력값 변경 change 값 변경 완료 focus 포커스 획득 blur 포커스 상실 4. 문서/윈도우 이벤트 이벤트 타입 설명 load 페이지 로드 완료 DOMContentLoaded DOM 로드 완료 resize 윈도우 크기 변경 scroll 스크롤 beforeunload 페이지 이탈 전 이벤트 핸들러 등록 방법 1. 인라인 이벤트 핸들러 (비권장) <button onclick="handleClick()">클릭하세요</button> <script> function handleClick() { console.log('버튼이 클릭되었습니다!'); } </script> 단점: ...