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

この記事では、主に 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 は問題があるため、追加するイベント関数とトリガーするイベント関数の間にいくつかの制約を追加する必要があります。つまり、イベントを追加するときに両方がアクセスできるイベント プールがあり、イベントと対応する処理関数をここに置きます。プール内でトリガー条件が満たされると、プールに移動してトリガーされるイベントを見つけ、対応する処理関数を実行します。これにより、上記のコードが得られます。

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 サイトの他の関連記事を参照してください。