야생의 핸들이벤트 등장😮 !!!

이름이 element인 DOM 요소가 있고 여기에 이벤트 리스너를 추가하려고 한다고 가정해 보겠습니다. 어떻게 하시겠습니까?

다음은 염두에 둘 수 있는 두 가지 방법입니다.

const handleClick = () =>{console.log('You can remove me later safely')}
element.addEventListener('click',handleClick);
element.addEventListener('click',()=>console.log('Try and remove me noob'));

이제 이러한 이벤트 리스너를 제거할 때 두 번째는 익명이기 때문에 제거할 수 없으며 첫 번째는 그냥 할 수 있습니다element.removeEventListener('click',handleClick);.

이벤트 리스너와 관련하여 익숙하지 않은 방법과 구문이 있다고 말하면 어떻게 됩니까?



여기 있습니다 :-

const someObj = {
handleEvent: (e)=>console.log(`I am ${e.type} event`);
}

element.addEventListener('click',someObj);

그리고 :-



농담은 제쳐두고 always이 있습니다. 덜 언급될 뿐입니다. 그리고 나는 this StackOverflow 질문을 해결했을 때 이것을 발견했고 내 마음은 날아갔습니다 wwwnn !!!



또한 다음과 같이 이벤트 리스너를 제거할 수 있습니다element.removeEventListener('click',someObj);.

이것을 찾은 후 등록 및 등록 취소 비트를 추상화하고 동일한 원리로 작업할 수 있는 최소한의Handler 클래스를 만들면 어떨까 생각했습니다.

그리고 이것이 어떻게 보이는지 :-

class Handler {
  #element
  #eventMap = {}

  constructor(element, eventMap) {
    this.#element = element
    this.register(eventMap)
  }

  handleEvent(e) {
    this.#eventMap[e.type](e)
  }

  register(eventMap) {
    this.#eventMap = { ...this.#eventMap, ...eventMap }
    Object.keys(this.#eventMap).forEach((event) => {
      this.#element.addEventListener(event, this)
    })
  }

  unregister(event) {
    this.#element.removeEventListener(event, this)
  }

  unregisterAll() {
    Object.keys(this.#eventMap).forEach((event) => {
      this.#element.removeEventListener(event, this)
    })
  }
}

하지만 내가 클래스 구현을 선택한 이유는 무엇입니까? 이제 우리는 add/removeEventListener에 객체를 전달할 수 있다는 것을 알고 있습니다. 내부에 Handler가 객체 인스턴스를 가리키고 사용할 사용자 정의this 클래스를 가질 수 있습니다.

이 코드의 사용 샘플을 살펴보겠습니다.

const handler = new Handler(element, {
  click: ()=>console.log('Yo I am clicky'),
  focus: ()=>console.log('FOCUS!!!'),
});

위의 작업은 element에 대해 각각의 이벤트에 대해 두 익명 함수를 모두 등록합니다. 그리고 다음과 같이 click에 대한 다른 함수를 등록하기 위해 더 나아가면 :-

  handler.register({
    click: () => console.log('Well I am new clicky')
  });

이렇게 하면 제거 처리에 대한 걱정 없이 기존click 함수를 재정의하고 이 새로운 익명 함수를 추가합니다.

이제 unregister 함수를 명시적으로 click 하려면 어떻게 해야 합니까?

handler.unregister('click');

따라서 익명 또는 비익명인 Handler 클래스는 각 이벤트 유형에 대해 동일한 요소에 대해 하나의 함수만 등록되도록 합니다. 그러나 동일한 요소에 대해 동일한 이벤트 유형에 대해 여러 함수를 등록하려면 어떻게 해야 합니까?

이 경우 동일한 Handler 클래스로 element 클래스의 다른 인스턴스를 생성하고 이를 담당하도록 할 수 있습니다.



그것은 나에게 여전히 새로운 개념이고 아마도 내가 잘못된 결론을 도출했을 수도 있습니다. 그러나 나는 그것에 대해 더 많이 알게되어 기쁩니다. 당신은 이것을 알고 계십니까? 그렇다면 이것을 사용해 보셨습니까? 당신은 그것을 선호하지 않습니까? 병목 현상이 있습니까? 해당 댓글 섹션 💪을 강타하십시오.
handleEvent에 대한 자세한 내용은 this 기사를 참조하십시오.

다음은 이 구현으로 플레이할 수 있는 코드펜입니다.

시간 내주셔서 감사합니다 :D