JS制御イベントまとめ_JavaScriptスキル

概要:

コントロールのメッセージ通信メカニズムは最も低コストでイベントを使用しますが、JS クラス自体はイベントをサポートしていません。 DOM モデルも同様です。イベントはブラウザーの DOM ノードにのみ適用されます。したがって、コントロールを作成する前に、一連のイベントを作成する必要があります。

イベントのメカニズム

イベントのメカニズムについてはこれ以上言いません。さまざまな言語でのイベントの説明は非常に具体的であり、それらはすべて同じです。オブザーバー パターンの実装で、イベントに必要なインターフェイスを抽出できます (コントロール ライブラリは jQuery に基づいているため、インターフェイスは jquery と一貫しています):

1.on: バインド イベント

2.off: イベントの削除

3.fire: イベントのトリガー

4.addTarget: バブリング オブジェクトの追加

5.publish: イベントのバブリングを許可

jQuery のイベント

jQuery のイベント関数は非常に豊富ですが、それらをサポートするには jQuery オブジェクトである必要があります。定義するコントロール クラスは jQuery イベントを直接使用できません。イベントのコンテキストにも問題があるため、コントロールのイベントを自分でカプセル化する必要があります。

jQuery の Callbacks は 1.7 で追加されたコールバックの仕組みで、非常に便利ですが、トリガー時に指定したコンテキストを独自のイベントにカプセル化する必要があることが問題です。クラス。

バインディング イベント:

関数プロトタイプ: function on(eventType,callback) パラメーター:
1.eventType: イベント タイプ
2.callback: コールバックfunction
3.scope: コールバック関数のコンテキスト。この変数は実際のコントロール バインディング プロセスではほとんど使用されず、代替手段があるため、簡単にするために、この関数とすべての関数でスコープ変数が使用されます。以下は で紹介されました。

上記のコールバック関数のコンテキストは、イベントがバインドされているコントロール自体です

バインディングの削除:
関数プロトタイプ: function off(eventType,callback) ) パラメーターは上記と同じです:

1.eventType: イベント タイプ
2.callback: コールバック関数。この変数を省略すると、このイベント タイプのバインドされた関数がすべて削除されます。
実際のコントロールの開発と使用のプロセスでは、イベントをバインドするよりもイベントを削除する方がはるかに面倒です。イベントを削除して追加する必要がある場合は、イベントをバインドするときに関数への参照が必要です。イベントを頻繁に行う場合は、デリゲート

を使用してイベント
関数プロトタイプ: fire(eventType) :

1 をトリガーすることを検討してください。オブジェクト上のこのタイプの関数を実装します。

ここで注意すべき点が 2 つあります:

1. イベントをトリガーする方法。ここでは同じイベントにバインドされている 'stopOnFalse' メソッドを使用します。 type 以下の関数は順番に実行され、戻り値のいずれかが false の場合、以下の関数は実行を終了します。イベントをトリガーする他の方法については、jquery のコールバックを参照してください。

2. イベントがバブリングによって実行されるかどうか。つまり、コントロールに複数のサブコントロールがある場合、サブコントロールがクリック イベントをトリガーすると、親コントロールにバブリングすることができます。親コントロールのイベントをバブルするだけです

イベント バブリング

関数プロトタイプ: function(eventType,bubble):

1 .eventType: イベントの種類
2.bubble: バブルするかどうか

この関数は関数 addTarget(control) と組み合わせて使用​​されます。

addTarget は、イベントがバブルするオブジェクトを追加します。コントロールの実装では、コントロールの親コントロールがバブルするオブジェクトとしてデフォルトで指定されます。

上記のトリガー イベントで述べたように、コントロール イベントのバブルアップを許可すると、次のような多くの利点があります。

1. イベントがバインドされた後は、サブコントロールの追加と削除は影響を受けません。

2. イベントの方が使いやすく、コントロールの内部を理解する必要がありません。

イベント バブリングに対応するのは委任 (デリゲートとデリゲート解除) です。委任はイベント バブリングに依存します。 DOM イベント メカニズムと jQuery は両方とも委任をサポートしています。これは、ブラウザ自体が DOM イベント バブリングをサポートしており、コントロールに実装したイベント バブリング メカニズムで十分であるため、委任は実装しません。インタフェース。


イベント コードの実装

次のコードで特定のコード実装といくつかのヘルプ メソッドを記述しました。これは記事内で展開するのが不便です。興味があります。見てみると、後続のコントロール ライブラリがこれらのヘルパー メソッドとイベント オブジェクトに基づいていることがわかります。ファイル内の他のヘルプ メソッドについては、他の章で説明します。