JavaScript Academy · 강의

사용자 지정 이벤트

직접 이벤트를 만들고 디스패치합니다.

레슨 4/413개 단계

사용자 지정 이벤트은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

내장 이벤트를 넘어서

DOM에서는 CustomEvent를 사용하여 직접 이벤트를 만들고 전달할 수 있습니다. 이를 통해 앱의 각 부분을 분리할 수 있습니다. 한 구성 요소가 어떤 일이 발생했음을 알리면 다른 구성 요소는 직접 참조 없이 이를 수신할 수 있습니다.

CustomEvent 만들기

new CustomEvent(name, options)으로 하나를 생성하십시오. 이름은 원하는 문자열로 지정할 수 있습니다.

const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"

이벤트 전달하기

dispatchEvent를 사용하여 대상에서 이벤트를 발생시키십시오. 해당 대상에 그 이름으로 등록된 모든 리스너가 실행됩니다. 이벤트가 버블링되면 조상에 등록된 리스너도 실행됩니다.

element.dispatchEvent(new CustomEvent("cart:add"));

이벤트 수신하기

addEventListener를 사용자 지정 이름과 함께 사용하면 기본 이벤트와 똑같은 방식으로 수신할 수 있습니다.

element.addEventListener("cart:add", () => {
  console.log("Something was added to the cart");
});

detail로 데이터 전달하기

detail 속성을 통해 데이터를 전달하십시오. 리스너는 event.detail에서 이 값을 읽습니다.

const evt = new CustomEvent("cart:add", {
  detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);

데이터 읽기

리스너 내부에서 event.detail에는 전달한 값이 들어 있습니다. 객체, 배열, 문자열 또는 숫자 등 어떤 값이든 사용할 수 있습니다.

element.addEventListener("cart:add", (e) => {
  console.log(e.detail.id, e.detail.qty); // 42 2
});

버블링되도록 만들기

사용자 지정 이벤트는 기본적으로 버블링되지 않습니다. 조상과 위임된 리스너가 이벤트를 받을 수 있도록 bubbles: true를 설정하십시오.

const evt = new CustomEvent("cart:add", {
  bubbles: true,
  detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listen

cancelable 옵션

리스너가 preventDefault()를 호출할 수 있도록 cancelable: true를 설정하십시오. 이벤트를 전달하는 코드는 dispatchEvent의 반환값을 확인하여 이벤트가 취소되었는지 알아냅니다.

const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();

분리 패턴

사용자 지정 이벤트를 사용하면 모듈끼리 서로 가져오지 않고도 통신할 수 있습니다. 로깅 또는 분석 계층은 document에서 앱 전체 이벤트를 수신할 수 있습니다.

document.addEventListener("user:login", (e) => {
  analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
  new CustomEvent("user:login", { detail: { userId: 7 } })
);

이름 지정 규칙

이벤트 이름에 네임스페이스를 지정하십시오(예: cart:add, user:login). 그러면 기본 이벤트와 이름이 충돌하는 것을 피하고 관련 이벤트를 명확하게 그룹화할 수 있습니다.

이전 구문과 새 구문

오래된 코드에서 기존 document.createEvent API를 볼 수 있습니다. 더 간단하고 오늘날 작성해야 할 유일한 형식인 최신 new CustomEvent(...) 생성자를 우선 사용하십시오.

const evt = new CustomEvent("ready", { detail: 1 });

빠른 확인

사용자 지정 이벤트 지식을 확인해 보십시오.

인터랙티브 레슨에서 답해보세요

복습

new CustomEvent(name, { detail, bubbles, cancelable })과 dispatchEvent를 사용하여 직접 이벤트를 만드십시오. event.detail로 데이터를 읽고, 위임을 위해 버블링을 활성화하며, 취소 가능한 동작에는 cancelable을 사용하십시오. 사용자 지정 이벤트를 사용하면 구성 요소가 깔끔한 발행-구독 방식으로 분리됩니다.

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 59
레슨: 200

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“사용자 지정 이벤트” 강의는 무료인가요?

네 — “사용자 지정 이벤트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“사용자 지정 이벤트”에서 뭘 배우나요?

직접 이벤트를 만들고 디스패치합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“사용자 지정 이벤트” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기