자바스크립트 실무 유틸 함수 시리즈 17 - 이벤트 제어를 위한 유틸

이번 17편에서는 브라우저 이벤트를 보다 효율적으로 다루기 위한 유틸 함수들을 정리합니다. 이벤트 등록, 해제, 위임, 방지 등 다양한 실무 시나리오에서 필요한 핵심 함수들입니다.

---

✅ 1. on (이벤트 등록)

📌 기본적인 이벤트 리스너 등록

function on(el, type, handler) {
  if (el) el.addEventListener(type, handler);
}

📌 활용 예시

(예: 폼 제출 버튼 클릭 시 알림 표시)

const btn = document.getElementById('submitBtn');
on(btn, 'click', () => alert('제출되었습니다.'));

---

✅ 2. off (이벤트 해제)

📌 등록된 이벤트 리스너 제거

function off(el, type, handler) {
  if (el) el.removeEventListener(type, handler);
}

📌 활용 예시

(예: 이메일 입력창에 포커스 감지 후, 입력 종료 시 이벤트 제거)

const input = document.getElementById('email');
function handleFocus() {
  console.log('입력 시작');
}
on(input, 'focus', handleFocus);
// 이후 필요 시 해제
off(input, 'focus', handleFocus);

---

✅ 3. once (한 번만 실행되는 이벤트)

📌 단일 실행 후 자동 해제되는 이벤트

function once(el, type, handler) {
  const wrapper = function (e) {
    handler(e);
    el.removeEventListener(type, wrapper);
  };
  el.addEventListener(type, wrapper);
}

📌 활용 예시

(예: 유저가 페이지를 최초로 스크롤할 때만 이벤트 발생)

once(window, 'scroll', () => console.log('첫 스크롤 발생'));

---

✅ 4. delegate (이벤트 위임)

📌 상위 요소에 이벤트 위임 처리

function delegate(parent, selector, type, handler) {
  parent.addEventListener(type, function (event) {
    const targetElement = event.target.closest(selector);
    if (targetElement && parent.contains(targetElement)) {
      handler.call(targetElement, event);
    }
  });
}

📌 활용 예시

(예: 동적으로 생성된 리스트 항목 클릭 시 완료 처리)

const list = document.querySelector('.todo-list');
delegate(list, 'li', 'click', function () {
  this.classList.toggle('done');
});

---

✅ 5. preventDefault 및 stopPropagation 래퍼

📌 기본 동작 방지 + 버블링 중단 처리

function stopEvent(e) {
  e.preventDefault();
  e.stopPropagation();
}

📌 활용 예시

(예: form 요소의 기본 제출 동작 방지 및 사용자 안내 메시지 출력)

const form = document.querySelector('form');
on(form, 'submit', e => {
  stopEvent(e);
  alert('폼 제출이 차단되었습니다.');
});

---

✅ 결론

이벤트는 사용자 인터페이스의 반응성을 구성하는 핵심 요소입니다. 이번 시리즈에서 다룬 유틸 함수들을 통해 이벤트 관리를 더 효율적이고 안전하게 구현할 수 있습니다.