野生の手淫事件😮 !!!

さあ、私たちには、DOM要素がありますelement そして、イベントリスナーを追加します.どうやってそうするの?
以下に2つの方法があります.

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

今、これらのイベントリスナーを削除することになると、それは匿名のため、2番目の1つを削除することはできませんし、最初の1つだけで行うことができますelement.removeEventListener('click',handleClick);私があなたに方法と構文があるとあなたに話すならば、それがイベントリスナーに来るとき、あなたはよく知らないかもしれませんか?

ここでは、

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

element.addEventListener('click',someObj);

そして-

冗談は脇にalways そこへ行った.それはほとんど話されていません.そして、私が解決したとき、私はこれに遭遇しましたthis StackOverflowの質問と私の心はblowwwwnn!

また、このようにイベントリスナーを削除できます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 the click どうやってそうするの?

handler.unregister('click');

匿名または匿名でHandler クラスは、各イベントタイプに対して、同じ要素に対して1つの関数だけを登録することを保証します.しかし、同じ要素のために同じイベントタイプのために複数の機能を登録したいならば、どうですか?
その場合、別のインスタンスを作成できますHandler 同じクラスelement そして、それに責任を負わせてください.

それはまだ私に新しい概念です、そして、多分、私は若干の間違った結論を導きました.しかし、私はそれについてより多くを知って幸せ以上です.ご存知ですか.もしそうならば、あなたはこれを使いましたか?あなたはそれを好むか?任意のボトルネック?コメントを投稿するには💪.
あなたはthis 記事へのより多くの洞察のためにhandleEvent .
ここでは、この実装で遊ぶことができるcodepenです.

あなたの時間をありがとう