[英]JavaScript event callback function scope issue with this?
我在理解这个概念时有点麻烦。 我有一个循环,在其中将事件和处理程序分配给元素。 问题是在回调中,我还正在访问成员函数。 我设定的范围,以获得正确的this
(指我的对象),但e.target
,我没有得到正确的元素。 所以我想我也想要正确的元素。 下面是代码。
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
对象对应的正确对象,以及与事件绑定的正确元素。
我想我明白您的要求。 这是我可能的方法:
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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.