删除在Javascript中的对象中设置的事件侦听器的问题

Question

我试图在纯javascript（无库）中创建滑块（例如：http://jqueryui.com/slider/），并且无法按照我的预期操作addEventListener/removeEventListener他们。基本上，当我深入探测mouseup侦听器并且无法删除mousemove事件侦听器并停止拖动过程时，我一直遇到一个问题，即我失去了mousemove侦听器对象的范围。

我也尝试创建一个带有EventListener接口的对象（例如，如此处所述：http://ajaxian.com/archives/an-alternative-way-to-addeventlistener），但遇到同样的问题。如果可能的话，我真的很想追求这条路线。

一些代码如何。这里的HTML：

<div class="slider"> 
    <div class="slider-bar"></div> 
    <div id="slider-1" class="slider-ball"></div> 
</div> 

这里的一些JavaScript的例子：

<script type="text/javascript"> 
function Slider(elem) { 
    this.elem = elem; 

    this.listen = function() { 
    this.elem.addEventListener('mousedown', this.mouseDown, false); 
    document.addEventListener('mouseup', this.mouseUp, false); 
    } 

    this.mouseDown = function(e) { 
    e.stopPropagation(); 
    document.addEventListener('mousemove', this.mouseDrag, false); 
    } 

    this.mouseUp = function() { 
    document.removeEventListener('mousemove', this.mouseDrag, false); 
    } 

    this.mouseDrag = function(e) { 
    // code to move the slider-ball on its X axis. 
    } 
} 

newSlider = new Slider(document.getElementById('slider-1')); 
newSlider.listen(); 
</script> 

我已经尝试了许多不同的方法 - 原型方法，一个单功能，内部方法（例如，以上），但在所有当我沿着this.addEventListener('mousedown', this.mouseDown, false);的线路运行某些东西时，我在mouseDown中丢失了this对象的范围。我使用bind()传递值 - this.addEventListener('mousedown', this.mouseDown.bind(null, this), false);以传递DOM对象，同时保持mouseDrag中的事件参数。凉！除了在那些情况下，我一直无法使用删除事件监听器。唯一的例外是，如果我通过this.elem.addEventListener...设置了mousemove事件侦听器，但在这种情况下，我的mousemove函数仅在光标在对象上移动而不在文档中的任何位置时运行，这是期望的行为。

我可以在一堆使用全局变量引用附加事件的独立函数中做到这一点，但我试图学习如何在一个对象内完成此操作。

Answer 1

使用绑定。 你有2个选择：

• 当您将事件
• 当你武官功能功能这一点。

像这样：

function Slider(elem) { 
    this.elem = elem; 

    this.listen = function() { 
    this.elem.addEventListener('mousedown', this.mouseDown.bind(this), false); 
    document.addEventListener('mouseup', this.mouseUp.bind(this), false); 
    } 

    this.mouseDown = function(e) { 
    e.stopPropagation(); 
    document.addEventListener('mousemove', this.mouseDrag, false); 
    } 

    this.mouseUp = function() { 
    document.removeEventListener('mousemove', this.mouseDrag, false); 
    } 

    this.mouseDrag = function(e) { 
    // code to move the slider-ball on its X axis. 
    }.bind(this); 
}