JavaScript事件处理函数范围控制研究

我有一个物体内部3种互联的方法：JavaScript事件处理函数范围控制研究

dragStartHandler: function(e) { 
     console.log(e.type, 'dragstart', e.pageX, e.pageY); 
     document.addEventListener('mousemove', this.dragMoveHandler, false); 
     document.addEventListener('mouseup', this.dragEndHandler.bind(this), false); 
    }, 

    dragMoveHandler: function(e) { 
     console.log(e.type, 'dragmove', e.pageX, e.pageY); 
     this.updateRotation(); 
    }, 

    dragEndHandler: function(e) { 
     console.log(e.type, 'dragend', e.pageX, e.pageY); 
     document.removeEventListener('mousemove', this.dragMoveHandler, false); 
    },

他们处理基于鼠标指针的位置旋转。我不知道该怎么做才能访问内部的dragMoveHandler并且能够同时删除元素监听器。我试过使用.bind（这个），但它返回了我无法删除的匿名函数dragEndHandler。

有没有我不知道的技术？

来源

2015-01-15 Richard the Lionheart

创建事件跟踪器，并添加引用跟踪器绑定的功能。 – Teemu 2015-01-15 16:18:41

你能否再详述一下？ – 2015-01-15 19:10:44

创建一个具有附加事件方法的对象。调用这个方法而不是直接的'addEventListener'。然后在该方法中，您可以将元素，事件等推送到跟踪器，并且还可以使用“绑定”方式来稍后移除事件。 [这是一个例子]（http://jsfiddle.net/pnb46b4m/）如何创建这样一个对象。（在小提琴中只有一个属性定义，代码不能正常工作，它需要更多的上下文。） – Teemu 2015-01-15 19:24:56

在周围的类中，您必须记住您的类指针，因为JavaScript中的this始终指向当前的执行/事件上下文。

首先我建议将类定义改写为而不是如果可能，请使用object-literal-syntax。

因为那样的话，你可以采取一个共同的模式，你“记得”在一个变量（在本例中名为self）原this参考的优势：

var MyClass = function(){ 
    var self = this; // this line is important, since `this` can change you have to save it 
    var dragStartHandler = function(e) { 
     console.log(e.type, 'dragstart', e.pageX, e.pageY); 
     document.addEventListener('mousemove', self.dragMoveHandler, false); 
     document.addEventListener('mouseup', self.dragEndHandler.bind(self), false); 
    } 
    var dragMoveHandler = function(e) { 
     console.log(e.type, 'dragmove', e.pageX, e.pageY); 
     self.updateRotation(); 
    } 

    var dragEndHandler = function(e) { 
     console.log(e.type, 'dragend', e.pageX, e.pageY); 
     document.removeEventListener('mousemove', self.dragMoveHandler, false); 
    } 
}

来源

2015-01-15 16:20:31

如果OP使用对象文字构建对象？ – Teemu 2015-01-15 16:22:10

@Teemu你说得对，我在这里添加了一些注释。 – 2015-01-15 16:30:35

@ovm我正在使用聚合物，它都在一个Web组件内，所以我宁愿坚持对象文字的一致性。但是我都是关于学习最佳实践的，对于一般的obj文字来说是错误的，还是这种情况？我听说过一些叫做object proxy patern的东西 - 它适用吗？ – 2015-01-15 19:20:42

JavaScript事件处理函数范围控制研究

回答

相关问题