이벤트 객체
target과 type 같은 이벤트 세부 정보를 읽습니다.
이벤트 객체은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이벤트 인수
이벤트가 발생하면 브라우저는 이벤트 객체를 핸들러에 전달합니다. 이 객체에는 어떤 일이 발생했는지와 어떤 요소가 관련되었는지에 대한 세부 정보가 담겨 있습니다.
btn.addEventListener("click", (event) => {
console.log(event.type); // "click"
});event.type
event.type은 이벤트 이름이므로, 하나의 핸들러가 이벤트 유형에 따라 다르게 반응할 수 있습니다.
function handle(e) {
console.log("Got a " + e.type + " event");
}event.target
event.target은 이벤트가 실제로 시작된 요소, 즉 사용자의 상호작용이 발생한 가장 안쪽 요소입니다.
list.addEventListener("click", (e) => {
console.log(e.target); // the exact clicked element
});event.currentTarget
event.currentTarget은 현재 리스너가 실행 중인 요소, 즉 addEventListener를 호출한 요소입니다.
list.addEventListener("click", (e) => {
console.log(e.currentTarget === list); // true
});target과 currentTarget 비교
이벤트가 버블링될 때 target은 자식 요소일 수 있지만 currentTarget은 수신 중인 부모 요소입니다. 이 차이를 활용하면 이벤트 위임을 구현할 수 있습니다.
list.addEventListener("click", (e) => {
// e.target = clicked <li>
// e.currentTarget = the <ul>
});이벤트 위임
부모에 리스너 하나를 연결하고 target.closest를 사용하여 어떤 자식이 동작의 대상이었는지 찾습니다. 리스너를 여러 개 두는 것보다 확장성이 좋습니다.
list.addEventListener("click", (e) => {
const item = e.target.closest("li");
if (item) console.log(item.dataset.id);
});event.timeStamp
event.timeStamp는 이벤트가 생성된 시점을 기록하므로 이벤트 사이의 시간을 측정할 때 유용합니다.
btn.addEventListener("click", (e) => {
console.log(e.timeStamp);
});마우스 이벤트의 좌표
마우스 이벤트에는 clientX/clientY(뷰포트 기준)와 pageX/pageY(문서 기준) 같은 위치 정보가 추가됩니다.
area.addEventListener("click", (e) => {
console.log(e.clientX, e.clientY);
});보조 키
e.shiftKey, e.ctrlKey, e.altKey, e.metaKey와 같은 프로퍼티를 통해 어떤 보조 키를 누르고 있었는지 알 수 있습니다.
btn.addEventListener("click", (e) => {
if (e.shiftKey) console.log("Shift-click");
});event.isTrusted
event.isTrusted는 실제 사용자가 생성한 이벤트에서는 true이고 스크립트가 만든 이벤트에서는 false이므로, 진짜 입력과 그렇지 않은 입력을 구분하는 데 도움이 됩니다.
btn.addEventListener("click", (e) => {
console.log(e.isTrusted);
});키 읽기
키보드 이벤트는 e.key(문자 또는 이름)를 제공하므로 특정 키에 반응할 수 있습니다.
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") console.log("submit");
});빠른 확인
두 대상을 구분해 보세요.
복습
이벤트 객체는 이벤트를 설명합니다. type, target(이벤트가 시작된 위치), currentTarget(리스너가 있는 위치)이 이에 해당합니다. 이 둘의 차이를 활용하면 이벤트 위임을 구현할 수 있습니다. 이벤트에는 좌표, 보조 키, key, timeStamp, isTrusted 정보도 포함됩니다.
자주 묻는 질문
“이벤트 객체” 강의는 무료인가요?
네 — “이벤트 객체” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“이벤트 객체”에서 뭘 배우나요?
target과 type 같은 이벤트 세부 정보를 읽습니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“이벤트 객체” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.