feat: addevent, removeEvent 추가

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);
       }

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);
+  }
+}