JS 에서 이벤트 처리 메커니즘

js 에서 이벤트 처 리 는 3 단계 목표 단계 캡 처 단계 거품 단계 (이하 표준 브 라 우 저 에서 설명 되 지 않 음) 로 나 뉘 어 DOM 2 급 이벤트 에서

    ele.addEventListener("click",fn1,true);//     ：                         
    ele.addEventListener("click",fn1,false);

이러한 쓰기 방법 은 클릭 할 때 fn1 을 두 번 반복 합 니 다. 그리고 실 행 된 선후 가 true 인 fn1 입 니 다. 그러나 표준 브 라 우 저 에서 같은 방법 으로 감청 을 하면 한 번 만 연결 되 지만 세 번 째 매개 변수 가 다 르 면 모 르 는 단계 에서 이 함 수 를 출발 했 지만 바 인 딩 도 한 번 만 연결 되 었 습 니 다.값 이 true 인 위 포획 단계 처리 false 는 거품 단계 촉발
IE (IE6 7 8) 에서 사건 감청 은 호환성 문제 가 많 을 것 입 니 다. 나중에 블 로그 소 개 를 해서 IE 의 간단 한 호환성 문제 앞 에 표준 브 라 우 저 뒤에 IE 가 있 습 니 다.

e=e||window.event;
e.target= e.srcElement;//   
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;
e.preventDefault=function(){e.returnValue=false};//        
e.stopPropagation=function(){e.cancelBubble=true};//      

사건 의뢰 가 무엇 인지 사건 의뢰 를 어떻게 활용 하 는 지 간단 한 예 를 들 어 보 겠 습 니 다.

<div id="outer">
      outer
    <div id="middle">
          middle
        <div id="inner">
              inner
            <p id="p1">
                  p1
                <span id="span1">
                      span
                </span>
            </p>
        </div>
    </div>
</div>

만약 에 제 가 span 에 클릭 이벤트 팝 업 ID 를 추가 하려 면 이벤트 의 거품 을 막 지 않 으 면 모든 부모 급 에 해당 하 는 ID 가 팝 업 됩 니 다.하지만 우 리 는 할 수 있 습 니 다.그것 이 바로 JS 에서 사건 전파 체 제 를 이용 한 것 입 니 다. 그러면 어떤 상황 에서 우리 가 이런 방식 을 사용 합 니까?일부 동적 요소 에서 우 리 는 이 방법 을 사용 하면 우리 가 사건 을 연결 하 는 번 거 로 움 을 잘 해결 할 수 있다.