JSカスタムイベントの概要とイベントインタラクションの原則(1)

JS では、イベントは JS がブラウザと対話する主な方法です。イベントはオブザーバーと呼ばれる設計パターンであり、疎結合コードを作成するための手法です。オブジェクトは、オブジェクトのライフサイクルにおける興味深い瞬間の到来を示すイベントを発行できます。他のオブジェクトはオブジェクトを観察し、興味深い瞬間が来るのを待ち、コードを実行して応答します。

オブザーバーパターンは、サブジェクトとオブザーバーの 2 種類のオブジェクトで構成されます。サブジェクトはイベントを公開する責任を負い、オブザーバーはこれらのイベントをサブスクライブすることでサブジェクトを観察します。このパターンの重要な概念は、エージェントはオブザーバーについて何も知らないということです。これは、オブザーバーが存在しなくてもエージェントは単独で存在し、正常に機能することができることを意味します。一方、オブザーバーは主題について知っており、イベントのコールバック関数 (イベントハンドラー) を登録できます。 DOM に関しては、DOM 要素が主体であり、イベント処理コードはオブザーバーです。

イベントは DOM と対話する最も一般的な方法ですが、カスタムイベントを実装することで、DOM 以外のコードでも使用できます。カスタムイベントの背後にある概念は、イベントを管理するオブジェクトを作成し、他のオブジェクトがそれらのイベントをリッスンできるようにすることです。簡単に言うと、プログラムの実行中に多くのルートが存在する可能性があり、プログラムが特別な場所に実行された場合、ユーザー登録メソッドのコードがすぐに実行され、実行後に実行が継続されることを期待します。このプロセスはモニタリングと呼ばれます。

たとえば、MyEvent.js ファイルを作成し、その中にクラスを作成します。

コードをコピーしますコードは次のとおりです。

 
function MyEvent(){ 
this.handler; 
} 
MyEvent.prototype={ 
addHandler:function(handler) 
{ 
this .handler=handler; 
}、
fire:function() 
{ 
this.handler(); 
removeHandler:function() 
{ 
this.handler=null; 
} 
} 

 

上記は、If Reader のアイデアを使用して作成されたクラスです。あまり詳しくない方でも、関連情報を確認できます。 MyEvent タイプには別の属性ハンドラーがあり、イベントハンドラー (つまり、ユーザーが登録したメソッド) を格納するために使用されます。イベントハンドラーの登録に使用される addHandler()、イベントのトリガーに使用される fire()、イベントハンドラーの登録解除に使用される RemoveHandler() という 3 つのメソッドもあります。

次に、これを次のように使用して、新しい HTML ファイルを作成し、簡単に参照できるように MyEvent.js と同じディレクトリに置きます。コードは次のとおりです:

コードをコピーコードは次のとおりです:

人気のチュートリアル

詳細>

JSカスタムイベントの概要とイベントインタラクションの原則(1)_JavaScriptスキル