JavaScript 이벤트 콜백 함수의 범위 문제는 무엇입니까?

Question

이 개념을 이해하는데 약간의 문제가 있습니다. 나는 이벤트와 핸들러를 요소에 할당하는 루프를 가지고있다. 문제는 콜백 내에서 멤버 함수에 액세스한다는 것입니다. 올바른 객체를 얻으려면 범위를 설정하고 e.target은 정확한 요소를 얻지 못합니다. (내 객체를 참조하십시오) this. 그래서 나는 또한 올바른 요소를 원한다고 생각합니다. 아래는 코드입니다. 내 핸들러 함수 내에서 지금

for(var i in type) { 
    element.addEventListener(type[i].toLowerCase(), (function (_self, handler) { //Handle this reference in event callback 
     //Using a closure to return callback with correct context     
     return function (event) { 
      //console.log(arguments); 
      //console.log(this); 
      _self[handler].apply(_self, arguments); 
     } 
    }(this, type[i])), capture); 
} 

:

dragStart: function (e) { 
    console.log(e); 
    var that = e.target, 
     sectionName = that.id, 
     interactionTarget = that.childNodes[0].alt; 

    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData('text/html', that.innerHTML); 
    this.dragSrcEl = that; 
    that.classList.add('fade'); 
    this.triggerEvent("whatever"); 
}, 

triggerEvent는 멤버 함수입니다. 내가 원하는 것은 내 객체에 해당하는 올바른 this이며 내 이벤트가 바인딩 된 올바른 요소입니다.

Answer 1

나는 당신이 지금 묻고있는 것을 이해한다고 생각합니다.

for(var i in type) { 
    element.addEventListener(
     type[i].toLowerCase(), 
     this[type[i]].call(this, element), 
     capture) 
} 

그리고 단지 dragStart : 여기에 내가 그것을 할 수있는 방법 (ES5를 사용하는 경우)

dragStart: function (element) { 
    return function(e){ 
     //this === original object 
     //element === listening element 
     //e.target === firing element 
    }.bind(this) 
} 

IE가 필요한 나이가 지원 될 경우`_self [처리기]와

dragStart: function (element) { 
    var self = this 
    return function(e){ 
     //self === original object 
     //element === listening element 
     //e.target === firing element 
    } 
}