JavaScript event callback function scope issue with this?
<p>I am having a bit of a trouble understanding this concept. I have a loop in which I assign events and handlers to elements. The problem is that within my callback, I am also accessing a member function. I set the scope to get the correct <code>this</code> (referring to my object) but for <code>e.target</code>, I am not getting the correct element. So I guess I also want the correct element. Below is the code.</p>

<pre><code>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);
}
</code></pre>

<p>Now within my handler function:</p>

<pre><code>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");
},
</code></pre>

<p><code>triggerEvent</code> is a member function. What I want is the correct <code>this</code> corresponding to my object and also the correct element to which my event is bound.</p>
