집 >웹 프론트엔드 >JS 튜토리얼 >DOM 이벤트 스테이지 및 이벤트 캡처 및 이벤트 버블링 실행 순서(자세한 그래픽 및 텍스트 설명)_jquery

DOM 이벤트 스테이지 및 이벤트 캡처 및 이벤트 버블링 실행 순서(자세한 그래픽 및 텍스트 설명)_jquery

WBOY원래의: 2016-05-16 15:44:251952검색

좋은 기억력은 나쁜 펜만큼 좋지 않다는 말이 있듯이, 많은 기술 기사를 철저하게 이해하지 않으면 기술적인 요점을 빨리 잊어버리게 됩니다. 편집자는 주로 찾아보고, 여러분과 공유하기 위해 제가 정리한 메모를 작성합니다.

개발 과정에서 우리 모두는 다른 사람들의 성숙한 프레임워크를 사용하기를 희망합니다. 왜냐하면 거인의 어깨에 서는 것이 개발 효율성을 크게 향상시키기 때문입니다. 그러나 우리는 그 기본 원칙도 이해해야 하며, 이해해야 합니다. 예를 들어 DOM 이벤트의 경우 jquery 프레임워크는 다양한 브라우저의 다양한 동작을 캡슐화하고 추상화하여 이벤트 처리에 큰 편의를 제공합니다. 그러나 브라우저는 점차 통일되고 표준화되고 있으며, 공식적으로 표준화된 인터페이스를 보다 안전하게 사용할 수 있습니다. 많은 개발자의 마음과 정신을 얻어야만 브라우저가 더 발전할 수 있기 때문입니다. 특정 페이지를 열 때 낮은 버전의 브라우저를 사용할 때와 마찬가지로 해당 페이지에 액세스하려면 Chrome과 같은 고급 브라우저를 사용하라는 메시지가 표시됩니다. 그러나 이것은 혁명적인 과정입니다. 우리의 웹페이지가 더 많은 사람들에게 더 나은 서비스를 제공하기 위해서는 이제 이러한 역사적 문제와 더 잘 호환되어야 합니다. 호환되기 위해서는 프레임워크에 의존하는 것 외에도 프레임워크의 기본 원칙을 이해해야 합니다.

3단계 DOM 이벤트

DOM 이벤트가 트리거되면 단순히 객체 자체에서 한 번만 트리거되는 것이 아니라 세 가지 단계를 거칩니다.

1. 캡처 단계: 먼저 문서의 루트 노드 문서에서 이벤트 트리거 개체로 이동하여 외부에서 이벤트 개체를 캡처합니다.

2. 대상 스테이지 : 대상 이벤트 장소(사건이 발생한 장소)에 도착하여 이벤트를 발동합니다

3. 버블 단계 : 그런 다음 대상 이벤트 위치에서 문서의 루트 노드까지 역추적하고 이벤트 개체를 안쪽에서 바깥쪽으로 버블링합니다.

인용 출처:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

이벤트 캡처와 이벤트 버블링의 순서는 명백합니다.

실험부분

온라인 편집기 열기:

http://jsbin.com/goqede/edit?html,css,js,output

코드는 다음과 같습니다.

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
     #outer{
       text-align: center;
       width: px;
       height: px;
       background-color: #ccc;
       margin: auto;
     }
     #middle{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
     }
     #inner{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
       border-rad
     }
   </style>
 </head>
 <body>
   <div id='outer'>
     <span>outer</span>
     <div id='middle'>
       <span>middle</span>
       <div id='inner'>
         <span>inner</span>
       </div>
     </div>
   </div>
   <script>
     function $(element){
       return document.getElementById(element);
     }
     function on(element,event_name,handler,use_capture){
       if(addEventListener){
         $(element).addEventListener(event_name,handler,use_capture);
       }
       else{
         $(element).attachEvent('on'+event_name,handler);
       }
     }
     on("outer","click",o_click_c,true);
     on("middle","click",m_click_c,true);
     on("inner","click",i_click_c,true);
     on("outer","click",o_click_b,false);
     on("middle","click",m_click_b,false);
     on("inner","click",i_click_b,false);
     function o_click_c(){
       console.log("outer_捕获");
       alert("outer_捕获");
     }
     function m_click_c(){
       console.log("middle_捕获")
       alert("middle_捕获");
     }
     function i_click_c(){
       console.log("inner_捕获")
       alert("inner_捕获");
     }
     function o_click_b(){
       console.log("outer_冒泡")
       alert("outer_冒泡");
     }
     function m_click_b(){
       console.log("middle_冒泡")
       alert("middle_冒泡");
     }
     function i_click_b(){
       console.log("inner_冒泡")
       alert("inner_冒泡");
     }
   </script>
 </body>
 </html>

내부를 클릭하면 결과는 다음과 같습니다.