JavaScriptイベントのメモリとパフォーマンスに対する影響

イベントハンドラは、現代のWebページに強力なインタラクティブ能力を追加することができますが、イベントハンドラの大量追加は、絶対におろかな行為です。
解析してみます。イベントハンドラは本質的には関数であり、対象としてメモリに保存されています。大量のイベントハンドラを設置すると、メモリ内のオブジェクトが多くなり、Webプログラムの性能がますます悪くなり、ユーザーの体験が悪くなります。
イベントハンドラをよりよく利用するために、イベント依頼があり、性能を向上させます。
イベント依頼
イベント依頼（event delegation）：いくつかのサブノードで同じイベントの処理関数をその親ノードに結び付け、親ノードでサブノードから泡が出てくるイベントを一括処理する技術をイベント依頼といいます。
イベント依頼は、親ノードと子ノードの間だけではない。このようにしてもいいです。例えば、ページドキュメントにはいくつかの場所があります。全部clickイベントと結びつけられています。イベント依頼を使って、これらのイベントを一括してbody要素に結びつけてから処理してもいいです。
以下の例を挙げて、イベント依頼のメリットを説明します。

<ul id="parent-list">
 <li id="list-1">List 1</li>
 <li id="list-2">List 2</li>
 <li id="list-3">List 3</li>
 <li id="list-4">List 4</li>
 <li id="list-5">List 5</li>
</ul>

上のコードがあると仮定して、上のリスト（ul）のどのサブリスト（li）をクリックしても、一つの枠をイジェクトして、どのサブリストをクリックしたかを表示する必要があります。
需要は難しくないですか？需要がありました。次はjsコードを書くべきです。今は二つの方法が目の前に置いています。1.各li要素にclickイベントを結びつけて、処理関数を設定します。2.イベント依頼を利用して、ul親要素にclickイベントをバインドし、処理関数を設定する

//    
var list1 = document.getElementById("list-1");
list1.addEventListener("click",function(){
 alert(this.firstChild.nodeValue);
},false);
var list2 = document.getElementById("list-2");
list2.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list3 = document.getElementById("list-3");
list3.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list4 = document.getElementById("list-4");
list4.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
var list5 = document.getElementById("list-5");
list5.addEventListener("click", function() {
 alert(this.firstChild.nodeValue);
}, false);
//    
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
 var target = event.target;
 if(target.nodeName.toLowerCase() === "li"){
 alert(target.firstChild.nodeValue);
 }
},false);

上記のコードを見て、私はここでいくつかの方法を書きます。2.サブ要素のイベントハンドラを親要素にまとめて結びつけ、メモリの占有を減らしました。3.イベントハンドラの参照を削除するなど、イベントハンドラをより良く管理することができます。
注意：各サブ要素に対する需要が違ったら、私達はまたこのように上の方法を書き換えることができます。

//    
var parentList = document.getElementById("parent-list");
parentList.addEventListener("click",function(){
 var target = event.target;
 if(target.nodeName.toLowerCase() === "li"){
 switch(target.id){
  case "list-1":
  alert("    ，       ！");
  break;
  case "list-2":
  alert("      ！");
  break;
  case "list-3":
  target.innerHTML = "  ，    ！";
  break;
  case "list-4":
  target.style.background = "#aaa";
  break;
  case "list-5":
  target.style.color = "red";
  target.style.fontSize = "2em";
  break;
  default:
  break;
 }
 }
},false);

事件依頼は事件のバブルメカニズムに依存しているので、すべての事件を依頼できるわけではない。
イベント依頼に最適なイベントとしては、click、mousedown、mouseup、keydown、keyup、keyyperresがあります。
イベント依頼は素晴らしいイベントバインディングの思想ですので、上記の例に拘らず、活用してください。
イベントハンドラを削除
前に述べたように、イベントハンドラはメモリに存在し、イベントハンドラを要素に指定するたびに、実行中のブラウザコードとページのインタラクションをサポートするJavaScriptコードとの間に接続が確立されます。このような接続が多いほど、ページの実行が遅くなります。前に述べたイベント依頼は、確立された接続数を制限することです。
また、メモリの中で使われなくなったイベントハンドラは、リリースしないと、Webアプリケーションのメモリや性能に影響を与えます。

<button id="button">  </button>
var button = document.getElementById("button");
button.onclick = function(){
 //            
 button.onclick = null; //         
 event.target.firstChild.nodeValue = "   。。。";
};

総じて原則としては、古いものが使われなくなったイベントハンドラを削除し、メモリを解放することです。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。