文書のかけらとイベント依頼

文書のかけら――
jsで複数のノードを作成する必要がある場合、document.create DocktFragment()の例を使用してもいいです.

var frag = document.createDocumentFragment();

  for(var x = 0; x < 10; x++) {
     var li = document.createElement("li"); 
     li.innerHTML = "List item " + x;
     frag.appendChild(li);
    }

  listNode.appendChild(frag)

                     ，        js     ，  createDocumentFragment()      ，       ，   js     。

タージ-JS属性
targetイベント属性は、イベントを生成する要素、文書、またはウィンドウなどのイベントのターゲットノードに戻ることができる.
!イベント依頼に必要な属性!
構文:event.target event.nodeName/取得イベントトリガ要素タグname(li,p...)event.target.id/取得イベントトリガ要素idevent.target.className/取得イベントトリガ要素clasname event.target.innersHTML/取得イベントトリガ要素の内容(li)
イベント依頼——
親要素に傍受イベントを追加し、e.targetを通じてクリックイベントを取得し、ノード名をnodeNameで取得します.イベント依頼はイベントエージェントとも言えるが、主な実現はイベントの泡が発生するメカニズムによって、相互作用の良いウェブページは様々な複雑なイベントから切り離せないが、イベントが多すぎるとウェブページの性能が低下し、メモリが漏れるリスクがある.この時は、イベント依頼と代理が必要となり、対象を直接触発されず、メモリ漏れやウェブページの性能低下を避ける.重要な属性:e.target――イベントを発生する要素、文書またはウィンドウe.srcelement――ieの下の方法注:e.targetは通常、現在のノードの位置を取得しているだけで、ノード名は分かりません.ここではnodeName(取得値大文字)を使って具体的な署名を取得します.さらに特定ノードの動作例のみを行う.

 
 
      

         
 
              
  Li
 
              
  p
 
                span
              
  Li
 
              
  Li
 
              
  Li
 
                span 
              
  Li
              
  Li
        
 
    
 

  
document.querySelector("div").addEventListener("click",
    function(e){ 
          e.target.style.backgroundColor="red"; 
          if(e.target.nodeName=="SPAN"){//    toLowerCase()     =="span" 
          e.target.style.backgroundColor="blue";
         } 
    }) 

domを複数操作したいですが、イベントで代理を依頼することもできます.

 
  
 
       
 
          
 
              
 
              
 
              
 
              
 
          
 
       
 
  
 
 
document.querySelector("div").addEventListener("click",
    function(e){ 
          if(e.target.nodeName=="INPUT"){ 
          switch(e.target.id){//  swith              
              case'add': alert('  ');break;
              case'remove': alert('  '); break; 
              case 'move' : alert('  '); break; 
              case 'select' : alert('  '); break;
           }  
      } 
})
 

イベント依頼の方法で、新たに追加されたサブ要素もイベント効果があります.イベントを依頼する時、要素のサブノードを遍歴する必要はなく、親レベルの要素にイベントを追加するだけでいいです.他はすべてjsの中で実行します.そうすると、dom操作を大幅に減らすことができます.これがイベント依頼の真髄です.