addEventListener 및 이벤트 객체
이벤트 리스너를 연결하고 Event 객체를 받으며 preventDefault와 stopPropagation을 사용하고 이벤트 버블링을 이해합니다.
addEventListener 및 이벤트 객체은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이벤트란 무엇입니까?
이벤트는 사용자가 클릭하거나, 키를 누르거나, 마우스를 움직이거나, 페이지가 로드되거나, 네트워크 요청이 완료되는 등 어떤 일이 발생했을 때 브라우저가 발생시키는 신호입니다. JavaScript는 이벤트 리스너를 연결하여 이벤트에 반응합니다.
addEventListener 구문
element.addEventListener(type, handler)는 이벤트가 발생할 때 실행할 함수를 연결합니다. 처리기는 어떤 일이 발생했는지에 대한 세부 정보가 담긴 Event 객체를 받습니다.
const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
console.log('Button clicked!', event);
});일반적인 이벤트 유형
마우스: 클릭, 더블 클릭, 마우스 진입, 마우스 이탈, 마우스 이동. 키보드: 키 누름, 키 뗌, 키 입력. 폼: 제출, 입력, 변경, 포커스, 포커스 해제. 문서: DOMContentLoaded, 로드. 창: 크기 변경, 스크롤.
// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);
// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));이벤트 객체
모든 처리기는 Event 객체를 받습니다. 주요 속성은 다음과 같습니다: e.target(이벤트를 발생시킨 요소), e.currentTarget(리스너가 연결된 요소), e.type(이벤트 이름), e.timeStamp.
document.addEventListener('click', (e) => {
console.log(e.type); // 'click'
console.log(e.target); // element that was clicked
console.log(e.currentTarget); // element with the listener (document)
console.log(e.timeStamp); // ms since page load
});preventDefault()
event.preventDefault()는 브라우저의 기본 동작을 중지합니다. 폼 제출이나 링크 이동을 막거나, 게임에서 마우스 오른쪽 버튼의 컨텍스트 메뉴가 나타나지 않도록 할 때 사용하십시오.
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop page reload
// validate and process form data with JavaScript
});
link.addEventListener('click', (e) => {
e.preventDefault(); // handle SPA navigation manually
router.navigate(e.target.href);
});stopPropagation()
event.stopPropagation()은 이벤트가 DOM 트리를 따라 위로 버블링되는 것을 중지합니다. 내부 요소의 처리기가 외부 요소의 처리기를 실행하면 안 될 때 사용하십시오.
modal.addEventListener('click', (e) => {
e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
closeModal(); // only fires for clicks outside modal
});이벤트 버블링
이벤트는 위쪽으로 버블링됩니다. 대상에서 발생한 후 부모 요소, 조부모 요소에서 차례로 발생하고 문서까지 이어집니다. 이벤트 위임은 이 방식으로 작동합니다. 부모 요소 하나에 리스너를 연결하고 e.target을 사용하여 실제로 클릭된 자식 요소를 식별합니다.
// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
if (e.target.matches('button')) {
console.log('Clicked:', e.target.textContent);
}
});이벤트 위임 패턴
이벤트 위임은 모든 자식 요소에 리스너를 연결하는 대신 부모 요소에서 이벤트를 감지하는 방식입니다. 더 효율적이며 동적으로 추가되는 자식 요소도 자동으로 처리합니다.
// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));
// Use delegation:
list.addEventListener('click', (e) => {
if (e.target.closest('li')) handleClick(e);
});키보드 이벤트
키보드 이벤트는 키를 누를 때 발생합니다. 최신 코드에서는 e.key('Enter', 'Escape', 'a'와 같은 문자열)를 사용하십시오. 이전 코드에서는 e.keyCode를 사용했지만 더 이상 사용되지 않습니다. e.metaKey, e.ctrlKey, e.shiftKey로 보조 키를 감지할 수 있습니다.
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
if (e.key === 'Enter' && e.ctrlKey) submitForm();
});이벤트 리스너 제거
removeEventListener를 사용하여 리스너를 분리하십시오. 처리기는 동일한 함수 참조여야 하므로 익명 함수는 제거할 수 없습니다. React/Vue에서는 일반적으로 이 작업을 직접 관리하지 않습니다.
function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);once 옵션
세 번째 인수로 { once: true }를 전달하면 리스너가 한 번 실행된 후 자동으로 제거됩니다. 스플래시 화면 닫기처럼 한 번만 실행되는 작업에 유용합니다.
document.querySelector('#start').addEventListener('click', startApp, { once: true });capture 옵션
기본적으로 리스너는 버블링 단계(위쪽)에서 실행됩니다. { capture: true }를 전달하면 캡처링 단계(아래쪽, 대상 자체의 리스너보다 먼저)에서 실행됩니다.
빠른 확인
이벤트에 대한 브라우저의 기본 동작을 중지하는 메서드는 무엇입니까?
복습: DOM 이벤트
addEventListener는 리스너를 연결합니다. Event 객체는 대상, 유형, 제어 메서드를 제공합니다. preventDefault()는 기본 동작을 차단합니다. stopPropagation()은 버블링을 중지합니다. 효율성과 동적으로 추가되는 자식 요소를 위해 이벤트 위임을 사용하십시오. 메모리 누수를 방지하려면 리스너를 제거하십시오.
자주 묻는 질문
“addEventListener 및 이벤트 객체” 강의는 무료인가요?
네 — “addEventListener 및 이벤트 객체” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“addEventListener 및 이벤트 객체”에서 뭘 배우나요?
이벤트 리스너를 연결하고 Event 객체를 받으며 preventDefault와 stopPropagation을 사용하고 이벤트 버블링을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“addEventListener 및 이벤트 객체” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- querySelector 및 querySelectorAll
- addEventListener 및 이벤트 객체
- 콘텐츠 변경: textContent, innerHTML, classList
- 요소 생성 및 추가