ネイティブパッケージのJavaScriptイベントリスナー関数

Javascriptをすでに良いパッケージ関数やメソッドがたくさんありました、ユーザーは、ユーザー体験をより便利に、大幅にコードを簡素化し、直接使用することを取得する必要がありますが、あなたが学んだ場合、ネイティブのJavaScriptは、これらのメソッドは、自分自身をカプセル化することができることを知っています基本となる実装のJSを理解し、およびJavaScriptのより良い理解を持つことができるラッパー関数、今日は時間のリスニング------のaddEventListenerとrmoveEventListenerの機能をカプセル化してみてください。

まず、いくつかのコードのaddEventListenerをしてrmoveListenerを達成します

< スタイル> 
 .box1 { 
  幅：100pxに。
  高さ：100pxに。
  背景色：blueviolet 。
  
 } 
 .box2 { 
  幅：100pxに。
  高さ：100pxに。
  背景色：チョコレート。
 } 
 </ スタイル> 
</ ヘッド> 
< 身体> 
 < divのクラス= "BOX1" > </ divの> 
 <DIV クラス= "BOX2" > </ DIV > 
</ ボディ>

上下のボックスは、我々は彼が結合機能を聴いて与えると、このページが表示されます

foo1の関数（）{ 
  にconsole.log（1）
 } 
  関数foo2は（）{ 
  にconsole.log（2）
 } 
 box1.addEventListener（ "クリック"、foo1の）
 box1.addEventListener（ "クリック"、foo2は）
 //結合BOX1にちょうどボックスBOX1上の2つのイベントをクリックすると、機能をトリガする、二つの事象をクリックし、出力2 1 
 box1.removeEventListener（「クリック」、foo1の）
 //キャンセルBOX1のfoo1が結合機能を追加し、ボックスにのみ、この時間をクリック出力2

これは、我々はプロトタイプに次の二つのパッケージ私の名前は同じではありませんが、同じ性能機能は、これを読んだ後、私たちはaddEventListenerをしてrmoveListenerのいくつかの理解を持つことができると信じて、直接監視できるという機能です

HTMLElement.prototype.myaddEventListener =関数（タイプ、handleFunction）{ 
  this.eventObject = this.eventObject || {} 
  種類= type.toLowerCase（）
  this.eventObject [タイプ] = this.eventObject [タイプ] || [] 
  もし（this.eventObject [タイプ] .INCLUDES（handleFunction））リターン//有相同名的函数就不执行
  this.eventObject [入力] .push（handleFunction）
  この[ "オン" +型] = E => { 
   this.eventObject [タイプ] .forEach（FN =>（FN（e）参照））。
  } 
 } 
 HTMLElement.prototype.myRemoveEventListener =関数（タイプ、handleFunction）{ 
  IF（this.eventObject [タイプ] .INCLUDES（handleFunction））{ 
   this.eventObject [タイプ] = this.eventObject .filter（項目=>項目[入力]を！= handleFunction） 
   この[ "オン" +型] = E => {
          this.eventObject [タイプ] .forEach（FN => FN（E））
        } 
  } 
 }

　　ネイティブのJavaScriptのより深い理解を持つことができる基礎となる機能パッケージを所有しようとすると、フレームワークを使用した後に使用することは非常に簡単になります。

ネイティブパッケージのJavaScriptイベントリスナー関数

おすすめ