javascript - javascriptのカスタムイベントの目的は何ですか?

Question

カスタム イベントをどのような状況で使用するのか理解できません。コンストラクターによって作成されたものを意味しますCustomEvent。

構文自体は理解していますが、なぜそれが役立つのかはわかりません。誰かがカスタム イベントの実際のアプリケーションの例を提供できればいいと思います。

Answer 1

私はそれ (恥知らずなプラグ) を使用して div 要素で「サイズ変更」イベントを発生させ、別のバインディング フレームワーク (aurelia) を使用してそれらのイベントをリッスンします。

明示的なコード例は次のとおりです。

var element = this.element; // some element
var erd = erd({ strategy: 'scroll' });

var widthOld = element.offsetWidth;
var heightOld = element.offsetHeight;

this.callback = () => {
  var event = new CustomEvent("resize", {
    detail: {
      width: this.element.offsetWidth,
      height: this.element.offsetHeight,
      widthOld: widthOld,
      heightOld: heightOld
    }
  });
  element.dispatchEvent(event);
  widthOld = this.element.offsetWidth;
  heightOld = this.element.offsetHeight;
};

erd.listenTo(this.element, this.callback);

ここで、erd はelement-resize-detectorであり、div の形状がいつ変化したかを検出できます。