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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:42 PM

イベント交流カスタムイベント

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

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7319

Java チュートリアル

1625

CakePHP チュートリアル

1349

Laravel チュートリアル

1261

PHP チュートリアル

1209

Related knowledge

イベント ID 4660: オブジェクトが削除されました [修正] Jul 03, 2023 am 08:13 AM

一部の読者がイベント ID4660 に遭遇しました。何をすればよいかわからないことが多いため、このガイドで説明します。イベント ID 4660 は通常、オブジェクトが削除されたときにログに記録されるため、コンピューター上でイベント ID 4660 を修正する実際的な方法も検討します。イベントID4660とは何ですか?イベント ID 4660 は Active Directory 内のオブジェクトに関連しており、次のいずれかの要因によってトリガーされます。オブジェクトの削除 – オブジェクトが Active Directory から削除されるたびに、イベント ID 4660 のセキュリティイベントがログに記録されます。手動変更 – ユーザーまたは管理者がオブジェクトのアクセス許可を手動で変更すると、イベント ID 4660 が生成される場合があります。これは、権限設定の変更、アクセスレベルの変更、またはユーザーやグループの追加または削除を行うときに発生する可能性があります。

win11 で分割画面インタラクションを有効にする Dec 25, 2023 pm 03:05 PM

win11 システムでは、画面分割インタラクションをオンにすることで、複数のモニターが同じシステムを使用して一緒に操作できるようにすることができます。しかし、多くの友人は、画面分割インタラクションをオンにする方法を知りません。実際には、画面分割インタラクションを有効にする方法を知りません。システム設定以下は「起きて勉強してください」です。 win11 で分割画面インタラクションを開く方法 1. スタートメニューをクリックし、[設定] を見つけます。 2. そこで [システム] 設定を見つけます。 3. システム設定を入力したら、左側の「ディスプレイ」を選択し、右側の複数のディスプレイで「これらのディスプレイを拡張する」を選択します。

iPhone のロック画面で今後のカレンダーイベントを取得する Dec 01, 2023 pm 02:21 PM

iOS 16 以降を実行している iPhone では、今後のカレンダーイベントをロック画面に直接表示できます。それがどのように行われるかを知るために読んでください。文字盤の複雑機構のおかげで、多くの Apple Watch ユーザーは、手首を一目見て次のカレンダーイベントを確認できることに慣れています。 iOS16 とロック画面ウィジェットの登場により、デバイスのロックを解除しなくても、同じカレンダーのイベント情報を iPhone で直接表示できるようになりました。カレンダーロック画面ウィジェットには 2 つの種類があり、次に予定されているイベントの時間を追跡したり、イベント名とその時間を表示する大きなウィジェットを使用したりできます。ウィジェットの追加を開始するには、Face ID または Touch ID を使用して iPhone のロックを解除し、長押しします。

VUE3 基本チュートリアル: Vue.js を使用したカスタムイベント Jun 15, 2023 pm 09:43 PM

Vue.js は、多くの便利な機能を提供する人気の JavaScript フレームワークであり、Web アプリケーションを開発する際に非常に役立ちます。 Vue.js のカスタムイベントシステムにより柔軟性が高まり、コンポーネントイベントの起動と処理を通じてコードの再利用性が向上します。この記事では、Vue.js でカスタムイベントを使用する方法について説明します。 Vue.js のカスタムイベントの基礎 Vue.js では、v-on ディレクティブを通じて DOM イベントをリッスンできます。例えば、

JavaScript では、「oninput」イベントの目的は何ですか? Aug 26, 2023 pm 03:17 PM

入力ボックスに値が追加されると、oninput イベントが発生します。次のコードを実行して、JavaScript で oninput イベントを実装する方法を理解してください。例<!DOCTYPEhtml><html> <body> <p>以下のように記述します:</p> <inputtype="text&quot

Vue3+TS+Vite 開発スキル: バックエンド API と対話する方法 Sep 08, 2023 pm 06:01 PM

Vue3+TS+Vite 開発スキル: バックエンド API と対話する方法はじめに: Web アプリケーション開発では、フロントエンドとバックエンド間のデータ対話は非常に重要なリンクです。人気のあるフロントエンドフレームワークとして、Vue3 にはバックエンド API と対話するためのさまざまな方法があります。この記事では、Vue3+TypeScript+Vite 開発環境を使用してバックエンド API を操作する方法を紹介し、コード例を通じて理解を深めます。 1. Axios を使用してリクエストを送信します。

PHPプロジェクトにカレンダー機能とイベントリマインダーを実装するにはどうすればよいですか? Nov 02, 2023 pm 12:48 PM

PHPプロジェクトにカレンダー機能とイベントリマインダーを実装するにはどうすればよいですか?カレンダー機能とイベントリマインダーは、Web アプリケーションを開発する際の一般的な要件の 1 つです。個人のスケジュール管理、チームの共同作業、オンラインイベントのスケジュール管理など、カレンダー機能は便利な時間管理とトランザクションの手配を提供します。 PHP プロジェクトでのカレンダー機能とイベントリマインダーの実装は、次の手順で完了します。データベースの設計まず、カレンダーイベントに関する情報を保存するデータベーステーブルを設計する必要があります。単純なデザインには次のフィールドを含めることができます: id: イベントに固有

uniapp 実装は JSBridge を使用してネイティブと対話する方法 Oct 20, 2023 am 08:44 AM

uniapp が JSBridge を使用してネイティブと対話する方法を実装するには、特定のコード例が必要です。 1. 背景の紹介モバイルアプリケーション開発では、ネイティブ関数の呼び出しやネイティブデータの取得など、ネイティブ環境と対話する必要がある場合があります。クロスプラットフォームのモバイルアプリケーション開発フレームワークとして、uniapp は、通信に JSBridge を使用して、ネイティブデバイスと対話するための便利な方法を提供します。 JSBridge は、フロントエンドがモバイルネイティブエンドと対話するための技術ソリューションです。

See all articles