js 中 removeEventListener() 方法不生效

前言

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 里写函数名称即可保证参数相同。

:)