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_);
}
