utterances-bot commented 3 years ago

이벤트 위임 | 재미있는 기억만 남기자

https://eyabc.github.io/Doc/dev/core-javascript/Browser_Event_Delegation.html

pul8219 commented 3 years ago

잘 읽었습니다 ! 이벤트 위임 활용하기 예제에서 객체를 버튼들을 담고있는 큰 단위인 menu로 만들잖아요...! 근데 이 때 '저장하기'를 누르면 클릭에 대한 function이 어떻게 실행되는건지 알 수 있을까요? '저장하기' 버튼 클릭에 대한 내용이 어떻게 elem.onclick = this.onClick.bind(this);로 전달되는건지 모르겠습니다;-;

khw970421 commented 3 years ago

목표와 방법부분을 구체적으로 제시해줘서 읽기 편했고 간결하게 정리해줘서 가독성도 좋았습니다.

eyabc commented 3 years ago

@pul8218

Goal : 아래 메서드에서 this 는 무엇일까요?

...
onClick(event) {
      let action = event.target.dataset.action;
      if (action) {
        this[action]();
      }
    };
  }

const menu = document.createElement('div') 가 있다고 가정했을 때, const menuInstance = new Menu(menu); 를 하면

    constructor(elem) {
      this._elem = elem;
...
    }

menuInstance 객체가 만들어 지고 생성자를 통해

<menuInstance 개형>
menuInstance: {
   _elem: menu,
  save,
  load,
  search 
  ...
}

menuInstance 객체는 _elem 의 값으로 menu 라는 dom 객체를 가지게 됩니다

그리고 다음으로 elem.onclick = this.onClick.bind(this); 에서 elem.onclick 은 이전에 다룬 내용 중. onclick 메서드의 . 앞의 dom 객체 elem가 this 인 것을 알 수 있습니다. elem.onclick = this.onClick이라면 this 에는 save, load, search 가 없습니다. 따라서 현재의 this.onClick 이 호출이 되면 정상적으로 기대하는 결과를 볼 수 없습니다. 따라서 save, load, search 를 사용하기 위해 this.onClick.bind(this); this.onClick 에 this 를 바인딩 해 줍니다. 클래스 내부에서의 this 는 클래스 인스턴스를 가리키기 때문에 this 는 menuInstance 입니다. onClick 의 내부의 this 를 menuInstance 로 바인딩 시켜주었습니다. 따라서 elem.onclick 이 호출되었을 때에 정상적으로 기대하는 결과를 관찰 할 수 있게 됩니다.

eyabc / blog-comment

https://eyabc.github.io/Doc/dev/core-javascript/Browser_Event_Delegation.html #24

이벤트 위임 | 재미있는 기억만 남기자