JavaScript 의 이벤트 형식 및 크로스 브 라 우 저 이벤트

사건 은 JavaScript 의 중요 한 구성 부분 이지 만 호 환 문 제 는 우리 프로그래머 학생 들 을 괴 롭 히 고 브 라 우 저 를 뛰 어 넘 는 사건 과 관련 된 내용 을 정리 하여 여러분 께 참고 하 시기 바 랍 니 다. 본 고 는 고도 3 을 공부 한 후에 정리 하 는 것 입 니 다.
이벤트 분류

DOM 0 급 사건 은 81955 ° 81955 ° 통속 적 으로 'on' + event Type 방식 으로 요소 바 인 딩 사건 을 사용 하 는 것 입 니 다. 쓰기 가 간단 하고 브 라 우 저 를 뛰 어 넘 는 장점 을 가지 고 있 습 니 다. 현대 브 라 우 저 는 모두 지원 합 니 다. DOM 0 급 방법 으로 사건 처리 프로그램 을 요소 로 지정 하 는 방법 입 니 다. 사건 처리 프로그램 은 요소 의 역할 영역 에서 실 행 됩 니 다.프로그램의 this 는 연 결 된 이벤트 의 요 소 를 가리 키 고 있 습 니 다.

DOM 2 급 사건 은 81955 ° 81955 ° 이벤트 의 추가 와 삭제 처리 에 사용 되 는 두 가지 방법 을 정 의 했 습 니 다. 즉, 8195 ° addEventLisrener (type, handler, boolean) 는 8194 ° 8195 ° removeEventLisrener (type, handler, boolean) 이 고 세 번 째 매개 변 수 는 boolean 값 입 니 다. 예 를 들 어 true 는 이벤트 캡 처 단계 에서 이벤트 처리 프로그램 을 호출 하 는 것 을 나타 냅 니 다.반대로 거품 단계 에서 이벤트 처리 프로그램 을 호출 합 니 다. addEventListener () 를 통 해 추 가 된 이 벤트 는 removerEventListener () 를 통 해 만 제거 할 수 있 습 니 다. addEventListener () 의 주요 장점 은 여러 이 벤트 를 추가 할 수 있 고 여러 이벤트 의 실행 서 는 책 이 쓴 순서대로 실 행 됩 니 다

.

IE 이 벤트 는 81955 ° IE 에서 DOM 2 급 과 유사 한 방법 을 실 현 했 습 니 다. 귀속 이벤트 방법 attachEvent (), 이벤트 detachEvent () 를 제거 하고 두 개의 매개 변수 이벤트 이름과 이벤트 처리 프로그램 을 받 습 니 다. DOM 2 급 이벤트 와 달리 IE 의 이벤트 이름 은 이벤트 이름 앞 에 "on" 을 추가 하고 detachEvent () 를 이용 하여 이 벤트 를 제거 할 때 같은 매개 변 수 를 입력 해 야 합 니 다.!메모: 이 방법 을 통 해 이벤트 처리 프로그램 을 연결 하 는 것 은 전역 에서 실 행 됩 니 다. this 는 window 를 실행 합 니 다. 또한, attachEvent () 를 여러 번 같은 대상 으로 연결 할 때 이벤트 의 프로그램 코드 작성 순 서 는 반대 입 니 다.

크로스 브 라 우 저 이벤트 패키지

    var EventUtil = {
        // 1.            1:       ,   2:     ,   3:       
        addHandler: function ( ele, type, handler) {

            // DOM2   
            if ( ele.addEventListener ) {

                //       false              ,
                ele.addEventListener( type, handler, false);

            // IE    
            } else if ( ele.attachEvent ) {

                ele.attachEvent( "on" + type, handler);

            // DOM 0      
            } else {
                ele["on" + type] = handler;
            }
        },

        // 2.      
        getEvent: function ( event ) {

            return event ? event : window.event;
        }

        // 3.    

        getTarget: function ( event ) {
            return event.target || event.srcElement;
        }

        // 4.      

        preventDefault: function ( event ) {

            if ( event.preventDefault ) {

                event.preventDefault();
            } else {

                //          return false
                event.returnValue = false;
            }
        }

        // 5.    
        removeHandler: function ( ele, type, handler ) {

            // DOM2      
            if ( ele.removeEventListener ) {

                ele.removeHandler( type, handler, false );

            } else if ( ele.detachEvent ) {

                ele.detachEvent( "on" + type, handler );

            } else {

                ele.[ "on" + type ] = null;
            }
        }

        // 6.     
        stopPropagation: function ( event ) {

            // DOM   
            if ( event.stopPropagation ) {
                
                event.stopPropagation();

            // IE     
            } else {
                event.cancelBubble = true;
            }
        }
    }

감사합니다, 부족 한 점 을 보충 하 세 요!