• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

delegate 헬퍼 함수의 용도가 궁금합니다.

22.03.19 16:59 작성 조회수 191

0

1. 이벤트 전파를 통해 공통된 하위 요소에 이벤트를 바인딩하기 위해서 사용하는 게 맞을까요?

2. 그리고 하위 요소가 렌더링 되기 전에 이벤트 바인딩해도 문제가 없는 게 상위 요소를 매개체로 바인딩해서가 맞을까요?

const liElements = qsAll('li', this.element);

liElements.forEach(li => {
  li.className = li.dataset.tab === selectedTab ? 'active' : '';
  li.addEventListener('click', (e) => {
    const payload = { tabType: li.dataset.tab, }
    this.emit(EVENT_TYPE.TAB_CLICK, payload)
  });
});

제가 구현했을때는 tabList가 렌더링 된 다음에 이벤트 바인딩해야 된다 생각해서 show 메서드 내부에서 바인딩하였는데 delegate 함수 사용하니 하위 요소 렌더링 여부가 무관해졌습니다.

 

답변 1

답변을 작성해보세요.

1

1. 버블링된 이벤트를 하나의 부모 요소에서 처리하기 위해서 사용하는 함수입니다. (자식 엘리먼트에 이벤트 핸들러를 바인딩하지 않고요.)

2. 네 맞습니다.

geuni님의 프로필

geuni

질문자

2022.03.22

답변 감사합니다!