이벤트 거품, 캡처, 에이전트

1. 이벤트 거품 및 포획
거품: 먼저 내부 사건을 촉발하고 외부 사건을 촉발한다.포획: 먼저 외부 사건을 촉발하고 내부 사건을 촉발한다.
addEventListener(event, function, useCapture);

이벤트: 이벤트;

function: 함수;

useCapture:false(거품, 기본값) 또는true(포획)

  document.getElementById('btn').addEventListener("click", function(){alert(1)},true); 

거품 방지: e.stopPropagation () 부모 요소가 이벤트를 더 이상 감청하지 않습니다.기본 이벤트 취소: e.preventDefault();
다음은 간단한 거품 발생과 거품 차단의 예입니다.

     // modal ， modal 
    
    
      
        
        
        
      
      
          
         
 modal
         
         var btn = document.getElementById('btn'),
                  modal = document.getElementById('modal');

          btn.onclick=function(e){
             e.stopPropagation();// ， 
             modal.style.display = "block";
          };
    

         modal.onclick = function(e){
           e.stopPropagation();// ， document 
        };

        document.onclick=function(e){
           modal.style.display="none";
        };
    
 

간단한 효과 여기를 누르면...
2. 이벤트 에이전트
이벤트 거품을 이용하여 동적 요소 이벤트 귀속을 처리하는 방법을 이벤트 의뢰라고 합니다.이벤트 의뢰 기술을 사용하면 특정한 각 노드에 이벤트 감청기를 추가하는 것을 피할 수 있지만, 반대로 이벤트 감청기는 그들의 부모 요소에 추가된다.이벤트 감청기는 하위 원소에서 거품이 일어난 사건을 분석하여 어느 하위 원소의 사건인지 찾아낸다.
이벤트 의뢰 3부작: 첫 번째 단계: 부모 요소 귀속 이벤트에 요소 ul에 귀속 이벤트를 추가하고addEventListener를 통해 이벤트 클릭에 귀속을 추가합니다. 두 번째 단계: 하위 요소의 거품 이벤트를 감청하는 여기는 기본적으로 거품입니다. 하위 요소 li를 누르면 위로 거품이 발생합니다. 세 번째 단계: 어떤 하위 요소의 이벤트를 익명 리셋 함수의 매개 변수 e를 통해 이벤트 대상을 수신하고 target을 통해 이벤트를 촉발하는 목표를 가져옵니다.
형제 노드를 추가하거나 삭제해야 할 경우 부모 요소에 의뢰할 수 있습니다.추가된 요소는 이벤트를 따로 연결할 필요가 없습니다.작은 코드를 예로 들면: 1.추가 단추를 누르면 대화상자를 팝업하고 추가할 내용을 입력하면 이 내용을 마지막에 추가할 수 있습니다.2. 삭제 버튼을 누르면 해당 마지막 노드가 삭제됩니다.3. 임의의 노드를 클릭하면 대화상자에서 이 노드의 텍스트 내용을 팝업합니다.

 
  
   
    
    
    
  
  
    

    
111
    
222
    
fff
  
   
   
  
     var lis = document.getElementsByClassName('li'),
          ct = document.getElementsByClassName('nav')[0],
      btnAdd = document.getElementById('add'),
       btnRm = document.getElementById('remove');

     btnAdd.addEventListener('click', function(){
        var inputTxt = window.prompt(" "),// 
        newLi = document.createElement('li');  // li 
        newLi.innerHTML = '<a class="li" href="#">'+ inputTxt+'</a></li>';// li 
        ct.appendChild(newLi);
     }) ;

     btnRm.onclick = function(){
       var lis = document.getElementsByClassName('li'),
        lastLi = lis[lis.length-1];
        lastLi.remove();
     };

     ct.onclick = function(evt){
        var target = evt.target;
       if(hasClass(target,'li')){
           handle(target);
      }
  };

 function handle(el){
    alert(el.innerText) ;
 }

 function hasClass(el, cls){
    return el.className.match(new RegExp('\\b'+cls+'\\b'));
  }

  
 

간단한 효과 여기를 누르면...
3.BOM
창 너비 가져오기: 윈도우.innerWidth;window.innerHeight;
location.hostname 도메인 이름 가져오기;location.href 온전한 주소 가져오기;location.hash 주소의 # 맨 뒤에 있는 내용 가져오기;location.reload () 현재 페이지 위치를 새로 고칩니다.프로토콜이 프로토콜 기록을 가져옵니다.back () 브라우저 후퇴history.forward () 브라우저 전진history.go(n) 앞으로 n걸음
var isAndroid =/android/i.test(navigator.userAgent);//안드로이드 시스템 var isIos =/ipad | iphone | mac/i.test (navigator.user Agent);//ios시스템navigator인지 아닌지 판단합니다.온라인은 네트워크가 연결되었는지 판단하고true,false를 되돌려줍니다.navigator.geolocation 장치 지리적 위치 상세 가져오기...
쿠키는 방문자의 컴퓨터에 저장된 변수입니다.쿠키 객체의 속성은 다음과 같습니다. 1. Name: 쿠키 이름을 가져오거나 설정합니다.2, Value: Cookie의 Value를 가져오거나 설정합니다.3. Expires: 쿠키의 만료 날짜와 이벤트를 가져오거나 설정합니다.4, Version: 쿠키의 HTTP 유지 관리 상태에 맞는 버전을 가져오거나 설정합니다.5. Path: 경로, 쿠키와 연결된 WEB 페이지 지정;6. Domain: 도메인, 연관된 웹 서버 또는 도메인 지정;
쿠키 객체의 방법은 다음과 같습니다. 1. Add: 쿠키 변수를 추가합니다.2, Clear: Cookie 컬렉션의 변수를 지웁니다.3. Get: 변수 이름이나 색인을 통해 쿠키의 변수 값을 얻을 수 있습니다.4, Remove: Cookie 변수 이름 또는 색인을 통해 Cookie 객체를 삭제합니다.
localStorage: 저장된 데이터는 시간 제한이 없습니다.다음 날, 둘째 주 또는 다음 해 이후에도 데이터를 사용할 수 있습니다.localStorage.setItem("age","100");데이터 localStorage 추가.removeItem("age");데이터 localStorage 삭제.clear () 모든 삭제

    //         
    var obj = {name: 'kevin', age: 100};
    localStorage.value = JSON.stringify(obj);

문자 비 효과 비 효과 버섯 거리 사이드바 효과