웹 페이지에서 일어나는 사용자의 모든 클릭, 스크롤, 키보드 누름 등의 상호작용 동작을 **이벤트(Event)**라고 부릅니다.
1. 이벤트 리스너: addEventListener()
웹 요소에 이벤트를 등록하는 표준 방법입니다.
const button = document.querySelector('#my-btn');
button.addEventListener('click', (event) => {
console.log("버튼이 클릭되었습니다!");
console.log("클릭된 요소:", event.target);
});
2. 자주 쓰이는 주요 이벤트 종류
- 마우스 이벤트:
click,dblclick,mouseenter,mouseleave - 키보드 이벤트:
keydown,keyup - 폼 이벤트:
submit(폼 제출),change(값 변경),focus/blur - 문서/브라우저 이벤트:
DOMContentLoaded(DOM 완성 시),resize(창 크기 변경)
3. 이벤트 기본 동작 방지: e.preventDefault()
태그가 가지는 기본 동작(예: <a> 태그의 페이지 이동, <form> 태그의 전송 후 새로고침)을 막고 자바스크립트로 직접 제어할 때 사용합니다.
const form = document.querySelector('#login-form');
form.addEventListener('submit', (e) => {
e.preventDefault(); // 폼 제출 시 화면 전체 새로고침 방지
console.log("자바스크립트 AJAX로 로그인 요청 전송");
});
4. 자주 묻는 질문 (Q&A)
Q. HTML 태그에 onclick="..." 속성을 직접 쓰는 방식과 addEventListener의 차이는?
A. onclick 속성은 하나의 이벤트 핸들러만 등록 가능해 덮어씌워지지만, addEventListener를 쓰면 여러 개의 서로 다른 이벤트를 깔끔하게 등록할 수 있어 모듈화에 유리합니다.