이벤트 핸들러가 작동하지 않음 : "this"컨텍스트가 자바 스크립트에서 손실 되었습니까?

Question

나는 슬라이더 요소

내가 핸들러에 대한 프록시를 사용하지 않을 경우,이 "이"DOM 요소 I 핸들러를 제거하려면 어떻게

를 가리 킵니다의 eventhandlers 제거에 문제가 있나요?

관련 코드

var slider = (function (slider) { 


var Sliderhandle = function(handle){ 
    EvtTarget.call(this); 

    this.events = { 
     start: ['touchstart', 'mousedown'], 
     move: ['touchmove', 'mousemove'], 
     end: ['touchend', 'touchcancel', 'mouseup'] 
    }; 

    this.options = {}; 
    this.element = $$('div.ui-slider'); 
    // set context for event handlers 
    this.start = this.start.bind(this); 
    this.move = this.move.bind(this); 
    this.end = this.end.bind(this); 

    this.proxy = function(func){ 
     var that = this; 
     return(function(){ 
     return func.apply(that,arguments); 
     }); 
    } 

    Object.defineProperty(this, "__el",{ 
     value:handle 
    }); 

}; 


    Sliderhandle.prototype = Object.create(EvtTarget.prototype,{ 
     init : { 
      value:function(config){ 



       this.container = $$('div.ui-slider');                  
       this.track = this.container.getElementsByClassName('ui-slider-track')[0]; 

       this.value = (config && config.value) || 1; 
       this.min = (config && config.min) || 1; 
       this.max = (config && config.value) || 1000; 
       this.change = (config && config.change) || null; // callback 

       this.addEvents("start"); 
       this.setValue(this.value); 

      }, 
      enumerable:true 
     }, 

     addEvents : { 
      value:function(name){ 
       var list = this.events[name], 
        handler = this[name], 
        all; 
       handler = this.proxy(handler); 
       for (all in list){ 
        this.container.addEventListener(list[all], handler, false); 
       }  
      }, 
      enumerable:true 
     }, 
     removeEvents:{ 
      value:function(name){ 
       var list = this.events[name], 
        handler = this[name], 
        all; 
       //handler = this.proxy(handler); 
       for (all in list){ 
        this.container.removeEventListener(list[all], handler, false); 
       } 
      }, 
      enumerable:true 
     }, 

당신에게 removeEventListener에 전달 handler와 같은 어떤 이벤트 리스너가 없기 때문에

Answer 1

문제가 대단히 감사합니다. this.proxy()은 각 호출에 대해 새로운 기능을 생성합니다. 반환 된 함수가 의미 상 동일한 작업을 수행 할지라도, 동일한 파라미터로 호출하더라도 전체적으로 다른 함수 객체 인을 반환합니다. 추가, 다음 한 때 같이 제거하는 것이 사용할 때

당신은 프록시 기능을 저장해야합니다 :

var Sliderhandle = function(handle){ 
    // .... 
    this.proxyHandler = {}; 
} 

// .... 

addEvents : { 
    value: function(name){ 
     var list = this.events[name], 
      handler = this[name], 
      all; 
     this.proxyHandler[name] = handler = this.proxy(handler); 
     for (all in list){ 
      this.container.addEventListener(list[all], handler, false); 
     }  
    }, 
    enumerable:true 
}, 
removeEvents:{ 
    value:function(name){ 
     var list = this.events[name], 
      handler = this.proxyHandler[name], 
      all; 
     for (all in list){ 
      this.container.removeEventListener(list[all], handler, false); 
     } 
     delete this.proxyHandler[name]; 
    }, 
    enumerable:true 
},