this로 event 접근하기

this로 event 접근하기
예제문제

this의 값은 함수를 호출한 방법과 환경에 따라 동적으로 세팅됩니다.
아래 예제에 this에 할당된 변수가 무엇을 의미하는지 살펴봅시다.

ar num = 0;
function add() {
  this.num = 1;
  num++;
  console.log(num); // 2
  console.log(window.num); // 2
  console.log(num === window.num); // true
}
add();

함수 선언문 안에서 this는 global 객체를 의미합니다.
함수 선언식이 내부 함수에서 선언될 경우 global이나 window 처럼 전역객체에 binding이 됩니다.

이러한 이벤트 binding 은 이 순서로 이루어집니다.

이벤트를 받아 줄 요소를 선택합니다.
선택한 요소에 어떤 이벤트에 반응할지, 요소와 이벤트를 연결해주는 바인딩을 합니다.
이벤트가 발생했을 때 실행될 코드를 작성합니다.

지시사항
“elem”이라고 태그된 버튼을 마우스로 클릭했을 때와 뗐을 때 버튼의 텍스트를 바꿔봅시다.

마우스 버튼을 눌렀을 때: “마우스 버튼을 눌렀습니다.”
마우스 버튼을 놓았을 때: “마우스 버튼을 뗐습니다.”

Menu 클래스의handleEvent()내에 수행할 코드를 작동하세요.
2.onMousedown()와 onMouseup()에 innerHTML 로 텍스트를 바꾸세요.

elem 버튼에 addeventListener()를 추가해서 mousedown과 mouseup 을 수행하세요.

나의 답안 코드_

class Menu {
  // 지시사항을 참고하여 코드를 작성하세요.
  handleEvent(event) {
    let method = "on" + event.type[0].toUpperCase() + event.type.slice(1);
    this[method]();~~~~
    
    
    
    /**if (method == "onMousedown")
          this.onMousedown();
  
      else if (method == "onMouseup")
          this.onMouseup(); */

  }

  onMousedown() {
      elem.innerHTML = "마우스 버튼을 눌렀습니다."
  }

  onMouseup() {
      elem.innerHTML = "마우스 버튼을 뗐습니다."
  }
}

let menu = new Menu();
const elem = document.getElementById("elem");
elem.addEventListener("mousedown", menu);
elem.addEventListener("mouseup", menu);