인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

geuni님의 프로필 이미지
geuni

작성한 질문수

[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

[순수JS 2] 탭 3(풀이)

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

해결된 질문

작성

·

259

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
질문자

답변 감사합니다!

geuni님의 프로필 이미지
geuni

작성한 질문수

질문하기