인프런 커뮤니티 질문&답변
작성한 질문수
[순수JS2]탭 3(풀이) 질문있습니다.
작성
·
145
1
안녕하세요 선생님 강의 잘 듣고 있습니다.
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는 이미 렌더링 되었다고 표현하는것이 맞나요?
감사합니다.
답변 1
1
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에게 이를 위임
선생님 delegate메소드가 엘리먼트 하위의 selector에게 위임 한다. 라는것이
최상위 target (this.element, #tab-view) 에서 emit 된 event("click")를 target의 하위 selector("li")들에게 이벤트 처리를 위임한다. 라고 말하면 맞는 말 인가요..?
delegate로직 자체는 이해를 하였는데 제 표현이 맞는 표현인지 궁금합니다.