js 에서 전통 사건 바 인 딩 시 뮬 레이 션 현대 사건 처리

7652 단어 js
IE 의 현대 이벤트 바 인 딩 (attachEvent) 은 W3C 표준 (addEventListener) 에 비해 많은 문제 가 존재 한 다 는 것 을 잘 알 고 있 습 니 다.
예 를 들 어 메모리 누 출, 이벤트 추가 반복 및 트리거 시 거꾸로 실행 등 이다.
다음은 봉 인 된 이벤트 의 귀속 을 전통 적 인 이벤트 의 방법 으로 처리 합 니 다.
이벤트 바 인 딩 이벤트 추가:
  addEvent.ID = 1;        //      
    function addEvent(obj, type, fn){
        if(obj.addEventListener){
            obj.addEventListener(type, fn, false);
        } else {        // IE
            //         ,        ,       ,         
            //                    ,=======          obj            
            if( !obj.events){
                //       :obj.events : {click:[fn1,fn2], mouserover:[fn1], ...}
                obj.events = {};
            }
            var flag = false;
            //       
            if( !obj.events[type]){
                //           
                obj.events[type] = [];
                //                            
                obj.events[type][0] = fn;
            } else {
                var eventfn = obj.events[type];
                //                   ,    flag true, return  
                for(var i in eventfn){
                    if(eventfn[i] == fn ){
                        flag = true;
                        return;
                    }
                }
                //          ,                ,          
                if( !flag ){
                    //          ,                 ,      
                    eventfn[addEvent.ID++] = fn;
                }

            }

            //                 
            obj["on"+type] = function(){
                var event = window.event;   //        

                //           ,        ,          , W3C    
                event.preventDefault = function(){
                    this.returnValue = false;
                };
                //            ,      ,    。
                event.stopPropagation = function(){
                    this.cancelBubble = true;
                };

                //                
                var evfn = obj.events[type];
                for(var i in evfn){
                    //     
                    evfn[i].call(this, event);     //                  ,                
                }
            }

        }
    }

 
이벤트 귀속 제거:
    function removeEvent(obj, type, fn){
        if(obj.removeEventListener){
            obj.removeEventListener(type, fn, false);
        } else {
            //
            var evefn = obj.events[type];
            for(var i in evefn){
                if(evefn[i] == fn){
                    // delete evefn[i];               ,                undefined
                    evefn.splice( i, 1);  //   i     1 ,
                }
            }

        }
    }

좋은 웹페이지 즐겨찾기