ホームページ ウェブフロントエンド jsチュートリアル JavaScriptカスタムイベントの詳細な分析

JavaScriptカスタムイベントの詳細な分析

Feb 01, 2018 am 10:27 AM
javascript js カスタマイズ

この記事では、主に JavaScript カスタム イベントの詳細な分析について説明します。イベントは、ユーザーがブラウザーと対話するための手段であり、一般に、ユーザーが入力した情報を収集し、その情報の正当性を検証します。 AJAX を使用してサーバーと通信する インタラクション、それを必要とする友人がそれを参照できるようにすることで、すべての人に役立つことを願っています。

イベント

私の技術レベルには一般的に限界がありますので、間違いがあればご指摘ください。

イベントはユーザーがブラウザと対話する方法です。たとえば、ユーザーが機能を登録する場合、基本情報を入力した後、送信ボタンをクリックして登録機能を実装できます。この機能を完了するために必要なのは、クリック イベントだけです。操作の動作を事前に定義し、ユーザーが送信ボタンをクリックしたときに、事前に決定された動作を実行します。この場合、コード ロジックは通常、ユーザーが入力した情報を収集し、情報の正当性を検証し、 AJAX を使用してサーバーと対話します。

このプロセスは、通常、関数をカプセル化してからその関数を呼び出すのと同じですが、イベント関数の呼び出しがユーザーの一部の操作によって通知されることを除いて、イベントは実際には関数定義と関数呼び出しのプロセスに似ています。ブラウザが関数を呼び出せるようにします。

まず第一に、ブラウザはクリックやキーダウンなどのイベントのリストを提供します。なぜイベントをカスタマイズする必要があるのでしょうか?実際、これは私たちの行動をより正確に表したものです。上記のユーザー登録を例に挙げると、saveMessage という名前のイベントを定義できます。このイベントは、送信ボタンがクリックされたときにトリガーされます。これは、通常の関数呼び出しと何ら変わりません。呼び出しとイベント トリガーの違いは、自分自身が実行する関数は関数呼び出しであり、自分が実行しない関数はイベント トリガーであることです。以下のコードを見てください:


window.onload = function(){
 var demo = document.getElementById("demo");
 demo.onclick = handler;
 function handler(){
  console.log("aaa");
 }
}
ログイン後にコピー

ボタンをクリックすると、aaa が表示されます。関数を直接呼び出すと、関数が呼び出されるのではなく、ブラウザによって実行されることがわかります。 aaa を出力することもできますが、これは私たちが呼び出すため、関数呼び出しになります。

カスタムイベントの役割

カスタムイベントとは、ブラウザのイベント機構に合わせてカスタマイズする機能です。カスタム イベントは、処理関数に適切な説明をもたらすことができ、プラグインにもより適切な処理プロセスをもたらすことができます。別の要件があるとします。サーバーから一連のデータを取得し、それを HTML でリストとして表示し、既存の処理関数を使用する場合は、次のように記述します。

dataTable("url");
$("table").find("input[type='checkbox']:first").prop("checked",true);
ログイン後にコピー

JS はシングルスレッドであり、AJAX は非同期であるため、これでは目的を達成できません。 $("table").find("input[type='checkbox']:first").prop の場合 ("checked") ",true) が実行された場合、必要なデータはまだ取得されていません。プラグインの内部実装を変更するのは明らかに賢明ではありません。受け入れられるプラグインには、リストを正常に描画するコールバック関数 (またはカスタム イベント) が必要です。コールバック関数はイベントとみなされ、このイベントにイベント操作を追加し、処理関数を定義し、リストが正常に描画されたときにプラグインにこの処理関数を実行させることができます。

カスタムイベントの実装

ブラウザのネイティブイベントをシミュレートしてカスタムイベントを実装します(en:カスタムイベント名、fn:イベント処理関数、addEvent:DOM要素にカスタムイベントを追加、triggerEvent:カスタムイベントをトリガーします)イベント):

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.addEvent("test",function(){console.log("handler1")});
 demo.addEvent("test",function(){console.log("handler2")});
 demo.onclick = function(){
  this.triggerEvent("test");
 }
}
Element.prototype.addEvent = function(en,fn){
 this.pools = this.pools || {};
 if(en in this.pools){
  this.pools[en].push(fn);
 }else{
  this.pools[en] = [];
  this.pools[en].push(fn);
 }
}
Element.prototype.triggerEvent = function(en){
 if(en in this.pools){
  var fns = this.pools[en];
  for(var i=0,il=fns.length;i<il;i++){
   fns[i]();
  }
 }else{
  return;
 }
}
ログイン後にコピー

自分自身によって実行される関数は関数呼び出しであり、自分によって実行されない関数はトリガーイベントと呼ぶことができます。その関数は自分によって呼び出されるわけではないため、呼び出し元はどの関数を呼び出すかをどのようにして知ることができますか。 call は問題があるため、追加するイベント関数とトリガーするイベント関数の間にいくつかの制約を追加する必要があります。つまり、イベントを追加するときに両方がアクセスできるイベント プールがあり、イベントと対応する処理関数をここに置きます。プール内でトリガー条件が満たされると、プールに移動してトリガーされるイベントを見つけ、対応する処理関数を実行します。これにより、上記のコードが得られます。

同じ関数(イベント)に対して多くの処理関数が存在する可能性があるため、これらの処理関数を格納するためのコレクションが必要になります。このとき、JSON または配列の 2 つの解決策を反映する必要があります。JSON の構造は key:value です。処理関数の場合、名前は影響しないため、この関数セットがどのような関数を処理するかを配列を使用して保存します。そのため、このとき、この処理関数セットの説明も必要です。必要です --> {イベント名:[]}。

簡略化された BootStrap モーダル ウィンドウを使用して、カスタム イベントの役割を示します:

window.onload = function(){
 var show = document.getElementById("show");
 var hide = document.getElementById("hide");
 var content = document.getElementById("content");
 show.onclick = function(){
  content.modal("show");
 }
 hide.onclick = function(){
  content.modal("hide");
 }
 content.addEvent("show",function(){alert("show before")});
 content.addEvent("shown",function(){
  document.getElementById("input").focus();
  alert("show after");
 }); 
}
;(function(ep){
 ep.addEvent = function(en,fn){
  this.pools = this.pools || {};
  if(en in this.pools){
   this.pools[en].push(fn);
  }else{
   this.pools[en] = [];
   this.pools[en].push(fn);
  }
 }
 ep.triggerEvent = function(en){
  if(en in this.pools){
   var fns = this.pools[en];
   for(var i=0,il=fns.length;i<il;i++){
    fns[i]();
   }
  }else{
   return;
  }
 }
 ep.modal = function(t){
  switch(t){
   case "show":
    this.triggerEvent("show");
    this.style.display = "block";
    setTimeout(function(){this.triggerEvent("shown")}.bind(this),0);//该定时器主要是为了在视觉上先看见content,在弹出消息
    break;
   case "hide":
    this.style.display = "none";
    break;
   default:
    break;
  }
 }

}(Element.prototype));
ログイン後にコピー

ポップアップ ウィンドウが表示される前後の処理関数を事前定義し、ポップアップ ウィンドウがトリガーされたときに実行できます。対応するイベント 対応する処理関数。

関連するおすすめ:

Vue.js コンポーネントでカスタム イベントをバインドする v-on

JavaScript でカスタム イベントを記述するための基礎知識

JavaScript でカスタム イベントを作成する方法


以上がJavaScriptカスタムイベントの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Netflix でカスタム アバターをすばやくセットアップする方法 Netflix でカスタム アバターをすばやくセットアップする方法 Feb 19, 2024 pm 06:33 PM

Netflix でカスタム アバターをすばやくセットアップする方法

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト

Eclipseでショートカットキー設定をカスタマイズする方法 Eclipseでショートカットキー設定をカスタマイズする方法 Jan 28, 2024 am 10:01 AM

Eclipseでショートカットキー設定をカスタマイズする方法

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする

ediusカスタム画面レイアウトの操作手順 ediusカスタム画面レイアウトの操作手順 Mar 27, 2024 pm 06:50 PM

ediusカスタム画面レイアウトの操作手順

ExcelでX軸とY軸をカスタマイズするにはどうすればよいですか? (Excelの軸スケールをカスタマイズする方法) ExcelでX軸とY軸をカスタマイズするにはどうすればよいですか? (Excelの軸スケールをカスタマイズする方法) Mar 14, 2024 pm 02:10 PM

ExcelでX軸とY軸をカスタマイズするにはどうすればよいですか? (Excelの軸スケールをカスタマイズする方法)

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

iPhoneで個人用の着信音を設定する方法 iPhoneで個人用の着信音を設定する方法 Feb 25, 2024 am 09:48 AM

iPhoneで個人用の着信音を設定する方法

See all articles