addEventListener 中 事件用bind指向this 后，无法移除事件问题

今天写BUG的时候，要在一个touchstart事件内添加 touchmove和touchend的事件注册。

然后，在touchend的时候再把2个事件给移除了。

之前一直不是很在意bind，apply，call一些细节的的我就在这里吃了亏，果然出来混的迟早要还的。

代码如下：

dom.addEventListener('touchstart', fTouchstart.bind(this));
function fTouchstart(e) {
    console.log('start:' + e, this); // TouchEvent对象，实例对象
    dom.addEventListener('touchmove', fTouchmove.bind(this));
    dom.addEventListener('touchend', fTouchend.bind(this));
}

function fTouchmove(e) {
    console.log(‘move:’ + e, this); // TouchEvent对象，实例对象
    dom.removeEventListener('touchmove', fTouchmove);
    dom.removeEventListener('touchend', fTouchend);
}

然后在浏览器上换成移动端在dom上点击几次，你会发现end事件执行次数之后每次会递增1。

原因：

bind方法返回了一个新的函数。在removeEventListener中移除的事件并没有绑定在TouchEvnent上，绑定上去的是bind()方法每次返回的函数。

解决方法：

在外面保存bind()返回函数的引用。

修改上面代码:

// 保存引用
var fTouchstart_ = fTouchstart.bind(this),
    fTouchmove_ = fTouchmove.bind(this),
    fTouchend_ = fTouchend.bind(this);

dom.addEventListener('touchstart', fTouchstart_);
function fTouchstart(e) {
    console.log('start:' + e, this); // TouchEvent对象，实例对象
    dom.addEventListener('touchmove', fTouchmove_);
    dom.addEventListener('touchend', fTouchend_);
}

function fTouchmove(e) {
    console.log(‘move:’ + e, this); // TouchEvent对象，实例对象
    dom.removeEventListener('touchmove', fTouchmove_);
    dom.removeEventListener('touchend', fTouchend_);
}