ホームページ > 記事 > ウェブフロントエンド > JavaScriptカスタムイベントの詳細な分析

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

小云云オリジナル: 2018-02-01 10:27:161228ブラウズ

この記事では、主に 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=&#39;checkbox&#39;]: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));

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

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

関連記事