前言
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包含这两种方法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
背景
最近在项目中使用 addEventListener 时遇到了一个问题：()!&#(%^*!(#%(!#(%……
不废话了，直接看代码
document.addEventListener("mousedown", function(e){
console.log("鼠标按下了");
document.addEventListener("mousemove", function(e){
console.log("鼠标在移动");
});
document.addEventListener("mouseup", function(e){
console.log("鼠标抬起了");
document.removeEventListener("mousemove",function(e){})
})
});
看代码，讲道理效果应该是这样的，鼠标按下后，控制台输出 鼠标按下了 ，此时挪动鼠标，控制台会持续输出 鼠标在移动， 然后松开鼠标，此时控制台输出 鼠标抬起了，这时再挪动鼠标，控制台讲道理不会再输出 鼠标在移动，因为我们已经使用 removeEventListener 移出移动时的事件监听了，然而它不讲道理。
原因
移除事件监听时传入的参数要与添加事件监听时使用的参数相同
解决办法
document.addEventListener("mousedown", function(e){
console.log("鼠标按下了");
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", function(e){
console.log("鼠标抬起了");
document.removeEventListener("mousemove", mouseMove)
})
});
function mouseMove(){
console.log("鼠标在移动");
}
先把监听后执行的方法封装成一个函数，这样直接在 eventListener 里写函数名称即可保证参数相同。
:)
