js 이벤트 전파 프로세스, 이벤트 저지 및 이벤트 흐름의 세 가지 과정

1. 사건 전파

대상 요소에 등록된 이벤트 처리 함수를 호출하면 대부분의 이벤트가 DOM 트리 루트에 거품이 생깁니다.대상의 부모 요소의 이벤트 처리 프로그램을 호출하고 대상의 할아버지 요소에 등록된 이벤트 처리 프로그램을 호출합니다.그러면 Document 객체에 도달하고 Window 객체에 도달합니다.문서 요소에서 발생하는 대부분의 이벤트는 거품이 일어납니다. 주의해야 할 예외는focus,blur,scroll 이벤트입니다.문서 요소의load 이벤트는 거품이 발생하지만, 문서 대상에서 거품이 발생하지 않고 윈도 대상에 전파되지 않습니다.모든 문서가 불러올 때만 윈도 대상의load 이벤트를 터치합니다.

2. 사건 저지

1. 이벤트의 기본 행동을 취소하고 이벤트가addeventListener ()를 지원하는 브라우저에 전파되지 않도록 하며 이벤트 대상의preventDefault () 방법을 호출하여 이벤트의 기본 동작을 취소할 수 있습니다.IE9 이전의 IE에서는 이벤트 대상의returnValue 속성을false로 설정하여 같은 효과를 얻을 수 있습니다.다음 코드는 세 가지 기술을 결합하여 이벤트를 취소합니다.

function cancelHandler(event){
    			 var event=event||window.event;// IE
    			 // 
    			 if(event.preventDefault) // 
    			 event.preventDefault();
    			 if(event.returnValue) // IE9 IE
    			 event.returnValue=false;
    			 return false; // 
    			}

이벤트 취소와 관련된 기본 동작은 이벤트 취소 중의 하나일 뿐이며, 우리도 이벤트 전파를 취소할 수 있습니다.addEventListener () 를 지원하는 브라우저에서 이벤트 대상의 stopPropagation () 방법을 호출하여 이벤트의 지속적인 전파를 막을 수 있습니다.같은 대상에 다른 프로세서를 정의하면 나머지 프로세서는 호출되지만,stopPropagation () 을 호출하면 다른 대상의 이벤트 프로세서는 호출되지 않습니다.
IE9 이전의 IE는 stopPropagation () 방법을 지원하지 않고 이벤트 대상인 cancelBubble 속성을true로 설정하여 이벤트의 추가 전파를 막습니다.

3. 사건 흐름의 세 가지 과정

1. 이벤트 캡처 단계 2.목표 단계에 처하다.이벤트 거품 단계