[순수JS2]탭 3(풀이) 질문있습니다.

Question

안녕하세요 선생님 강의 잘 듣고 있습니다. delegate에 관해서 제가 아래처럼[(1),(2)] 이해하고 있는데 이것이 맞게 이해한것인지 궁금합니다.   1) delegate에서emitEvent에 담기는것은 아직 호출되지 않은 함수인데 이게 tabView생성자가 호출되는 시점에 렌더링이 되지않은 (?) id =tab-view에 delegate 안의 on 메소드에 의해 바인딩이 됩니다.   2) 이후 id=tab-view에 click 이벤트가 발생하면 그제서야 on에 의해 바인딩되었던 이벤트처리기 (emitEvent)가 호출되어서 실제 bindEvents()에서 바인딩하려했던 handleClick 를 호출합니다.     3) 또 쓰다 보니 궁금한것이 아직 TabView의 show가 호출되기 전이긴 한데 constructor에서는 bindEvents() 메소드 안에서 delegate -> on 메소드에서 target.addEventListener를 호출하고 있는데 id=tab-view는 이미 렌더링 되었다고 표현하는것이 맞나요? 감사합니다.

김정환 · Answer

1) delegate(target, eventName, selector, handler) 함수는 target에서 발생할 eventName과 handler를 바딩하는데 selector 에게 역할을 위임한다라고 생각하시면 어떻까요? 그러면 delegate(this.element, "click", "li", (event) => this.handleClick(event)) 는 "TabView에 클릭 이벤트 처리리를 바인딩하는데 정확한 타켓은 li 엘리먼트에게 위임한다" 정도로 해석해 볼 수 있겠습니다. tabView 생성자가 호출된 시점에는 이미 id="tab-view"는 렌더되었습니다. html 파일에 이미 정의 되어 있기 때문이에요. 2) id=tab-view(target)에 click(eventName) 이벤트가 발생하면 handleClick이 실행됩니다. 이 때 delegate에 전달한 selector로 정확한 이벤트 타겟 객체를 찾는데 이게 바로 delegate 함수 안의 emitEvent의 역할입니다. 3) 네, TabView에 연결할 html은 이미 렌더되어 있습니다.   delegate 함수가 좀 어려울 수 있는데요. on 함수와 비교하면 역할이 좀 더 명확하게 보이실 겁니다. on: 엘리먼트에 이벤트 핸들러 연결 delegate: 엘리먼트에 이벤트 핸들러를 연결, 단 엘리먼트 하위의 selector에게 이를 위임