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

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 と同じディレクトリに置きます。コードは次のとおりです:

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

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル