diff --git a/src/lib/createElement.js b/src/lib/createElement.js index c85d752..44442f2 100644 --- a/src/lib/createElement.js +++ b/src/lib/createElement.js @@ -36,7 +36,8 @@ function updateAttributes(element, props) { if (attr === "className") { element.setAttribute("class", value); } else if (attr.startsWith("on")) { - addEvent(element, attr, value); + const eventType = attr == "onClick" ? "click" : attr; + addEvent(element, eventType, value); } else { element.setAttribute(attr, value); } diff --git a/src/lib/eventManager.js b/src/lib/eventManager.js index 24e4240..8a8f78d 100644 --- a/src/lib/eventManager.js +++ b/src/lib/eventManager.js @@ -1,5 +1,50 @@ -export function setupEventListeners(root) {} +const eventRegistry = []; +let rootElement = null; -export function addEvent(element, eventType, handler) {} +function isEventMatch(eventA, eventB) { + return ( + eventA.element === eventB.element && + eventA.eventType === eventB.eventType && + eventA.handler === eventB.handler + ); +} -export function removeEvent(element, eventType, handler) {} +export function setupEventListeners(root) { + rootElement = root; + + // eventRegistry 배열에 있는 모든 이벤트를 루트 요소에 등록 + eventRegistry.forEach(({ eventType, handler }) => { + rootElement.addEventListener(eventType, handler); + }); +} + +export function addEvent(element, eventType, handler) { + let eventExists = false; + + for (const $event of eventRegistry) { + if (isEventMatch($event, { element, eventType, handler })) { + eventExists = true; + break; + } + } + + if (eventExists) return; + + // 이벤트 정보를 배열에 추가 + eventRegistry.push({ element, eventType, handler }); +} + +export function removeEvent(element, eventType, handler) { + let matchingEvent = null; + eventRegistry.forEach(($event) => { + if (isEventMatch($event, { element, eventType, handler })) { + matchingEvent = $event; + } + }); + + if (!matchingEvent) return; //값이 없으면 그대로 종료 + + if (matchingEvent !== null) { + rootElement.removeEventListener(eventType, matchingEvent.handler); + } +}