JavaScript事件回調函數的範圍問題呢？

我對理解這個概念有點困難。我有一個循環，我將事件和處理程序分配給元素。問題是在我的回調中，我也在訪問一個成員函數。我將範圍設置爲獲得正確的this（指的是我的對象），但是對於e.target，我沒有得到正確的元素。所以我想我也想要正確的元素。以下是代碼。JavaScript事件回調函數的範圍問題呢？

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對應於我的對象，也是我的事件綁定正確的元素。

來源

2013-05-08 ayesham

隨着'_self [處理]。 apply（_self，this）;'，看起來像你想要做的事情'_self [handler] .call（_self，event）;'相反，除非我丟失了一些東西 – bmceldowney 2013-05-08 19:32:44

對不起，實際上這是一個來自調試和掙扎。我其實想通過'論證' – ayesham 2013-05-08 19:37:30

嗯。在這種情況下，你不應該能夠執行'element.addEventListener（type [i] .toLowerCase（），this [type [i]]。bind（this）），capture）'而不是？這應該做你想做的。 – bmceldowney 2013-05-08 19:49:01

我想我明白你現在在問什麼。以下是我可以做到這一點：

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瀏覽器需要支持：

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

來源

2013-05-08 21:02:59 bmceldowney

JavaScript事件回調函數的範圍問題呢？

回答

相關問題