문서 조각 과 이벤트 의뢰

문서 조각 -
js 로 여러 노드 를 만 들 필요 가 있 을 때 document. createDocumentFragment () 예 를 사용 할 수 있 습 니 다.

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     。

target -- JS 속성
target 이벤트 속성 은 이벤트 의 대상 노드 (이 사건 을 촉발 하 는 노드) 를 되 돌려 줍 니 다. 예 를 들 어 이벤트 의 요소, 문서 또는 창 을 생 성 합 니 다.
！！이벤트 의뢰 에 필요 한 속성!!
문법: event. target event. target. nodeName / / 이벤트 트리거 요소 태그 가 져 오기 name (li, p...) event. target. id / / 이벤트 트리거 요소 id event. target. className / / 이벤트 트리거 요소 가 져 오기 classname event. target. innerHTML / / 이벤트 트리거 요소 의 내용 가 져 오기 (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 작업 을 크게 줄 일 수 있 습 니 다. 이것 이 야 말로 사건 의뢰 의 정수 입 니 다.