JavaScript 에서 이벤트 거품 메커니즘 예시 상세 분석

거품 은 무엇 입 니까?
DOM 이벤트 흐름(이벤트  flow)세 단계 가 존재 합 니 다.이벤트 캡 처 단계,목표 단계,이벤트 거품 단계 에 있 습 니 다.
이벤트 캡 처  capturing):마우스 로 dom 이 벤트 를 클릭 하거나 터치 할 때 브 라 우 저 는 루트 노드 부터 외부 에서 내부 로 이벤트 전 파 를 진행 합 니 다.즉,하위 요 소 를 클릭 합 니 다.부모 요소 가 이벤트 캡 처 방식 으로 해당 하 는 이 벤트 를 등록 하면 부모 요소 가 연 결 된 이 벤트 를 먼저 촉발 합 니 다.
이벤트 거품 발생  bubbling):이벤트 캡 처 와 정반 대 입 니 다.사건 의 거품 순 서 는 내부 에서 외부 로 사건 전 파 를 하고 뿌리 노드 까지 입 니 다.
dom 표준 이벤트 흐름 의 촉발 우선 순 서 는 다음 과 같다.먼저 포획 하고 거품 을 낸다.즉,dom 사건 을 촉발 할 때 먼저 사건 포획 을 하고 사건 원 을 포획 한 후에 사건 전 파 를 통 해 사건 거품 을 낸다.서로 다른 브 라 우 저 는 이에 대해 서로 다른 실현 을 가지 고 있 으 며,IE 10 및 이하 에 서 는 캡 처 형 이 벤트 를 지원 하지 않 기 때문에 하나의 이벤트 캡 처 단계 가 줄 어 들 었 고,IE 11,Chrome,Firefox,Safari 등 브 라 우 저 는 동시에 존재 한다.
addEventListener()방법
이 방법 은 이벤트 감청 기 를 설정 합 니 다.어떤 사건 이 발생 하면 설 정 된 매개 변 수 를 통 해 작업 을 수행 합 니 다.문법 은:
addEventListener(event, function, useCapture)
인자 이 벤트 는 필수 입 니 다.감청 을 표시 하 는 이벤트 입 니 다.예 를 들 어 click,touch start 등 은 접두사 on 을 추가 하지 않 은 이벤트 입 니 다.
매개 변수 function 도 필수 입 니 다.이벤트 가 실 행 된 후 호출 되 는 함 수 를 표시 합 니 다.외부 정의 함수 일 수도 있 고 익명 함수 일 수도 있 습 니 다.
인자 useCapture 는 선택 한 것 입 니 다.true 나 false 를 채 우 는 것 입 니 다.이벤트 가 거품 인지 캡 처 인지 설명 하 는 데 사 용 됩 니 다.true 는 캡 처 를 표시 하고 기본 적 인 false 는 거품 을 표시 합 니 다.
이벤트 감청 제거
addEventListener()에 추 가 된 이벤트 감청 을 제거 하려 면 removeEventListener()를 사용 해 야 합 니 다.문법 은:
removeEventListener(event, function)
매개 변 수 는 addEventListener()와 일치 합 니 다.
호환성
IE 8 및 더 빠 른 버 전,Opera 7.0 및 더 빠 른 버 전,addEventListener()와 removeEventListener()방법 은 지원 되 지 않 습 니 다.그들 은 다음 과 같은 방법 으로 대체 합 니 다.
이벤트 추가:
attachEvent(event, function)
이벤트 제거:
**detachEvent(event, function) **
다음 과 같은 방법 으로 호환성 문 제 를 해결 할 수 있다.

if (div1.addEventListener) {
         div1.addEventListener('click', function () {
             console.log("  ")
         });
} else if (div1.attachEvent) {
         div1.attachEvent('onclick', function () {
             console.log("   ")
         });
}

거품 과 포획 의 구체 적 인 차이
HTML

    <div id="div1">
         <div id="div2"></div>
    </div>

JS

<script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.addEventListener('click',function(){
            console.log("div1--    ")
        },true);
        div2.addEventListener('click',function(){
            console.log("div2--    ")
        },true);
        div1.addEventListener('click',function(){
            console.log("div1--    ")
        });
        div2.addEventListener('click',function(){
            console.log("div2--    ")
        });
</script>

출력 결과(div 2 를 눌 렀 을 때 실 행 된 결과)

해결 방법

function stopBubble(e) {
         if (e && e.stopPropagation) {
                e.stopPropagation(); //     W3C stopPropagation()   
         } else {
             window.event.cancelBubble = true; //  ，      IE           
         }
}

 

총결산
자 바스 크 립 트 의 이벤트 거품 메커니즘 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 자 바스 크 립 트 이벤트 거품 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!