前言

addEventListener()與removeEventListener()用于處理指定和刪除事件處理程序操作。所有的DOM節(jié)點(diǎn)中都包含這兩種方法，并且它們都接受3個(gè)參數(shù)：要處理的時(shí)間名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

背景

最近在項(xiàng)目中使用 addEventListener 時(shí)遇到了一個(gè)問題：()!&#(%^*!(#%(!#(%……

不廢話了，直接看代碼

document.addEventListener("mousedown", function(e){
    console.log("鼠標(biāo)按下了");

    document.addEventListener("mousemove", function(e){
        console.log("鼠標(biāo)在移動");
    });

    document.addEventListener("mouseup", function(e){
        console.log("鼠標(biāo)抬起了");

        document.removeEventListener("mousemove",function(e){})
    })
});

看代碼，講道理效果應(yīng)該是這樣的，鼠標(biāo)按下后，控制臺輸出 鼠標(biāo)按下了 ，此時(shí)挪動鼠標(biāo)，控制臺會持續(xù)輸出 鼠標(biāo)在移動， 然后松開鼠標(biāo)，此時(shí)控制臺輸出 鼠標(biāo)抬起了，這時(shí)再挪動鼠標(biāo)，控制臺講道理不會再輸出 鼠標(biāo)在移動，因?yàn)槲覀円呀?jīng)使用 removeEventListener 移出移動時(shí)的事件監(jiān)聽了，然而它不講道理。

原因

移除事件監(jiān)聽時(shí)傳入的參數(shù)要與添加事件監(jiān)聽時(shí)使用的參數(shù)相同

解決辦法

document.addEventListener("mousedown", function(e){
    console.log("鼠標(biāo)按下了");

    document.addEventListener("mousemove", mouseMove);

    document.addEventListener("mouseup", function(e){
        console.log("鼠標(biāo)抬起了");

        document.removeEventListener("mousemove", mouseMove)
    })
});

function mouseMove(){
    console.log("鼠標(biāo)在移動");
}

先把監(jiān)聽后執(zhí)行的方法封裝成一個(gè)函數(shù)，這樣直接在 eventListener 里寫函數(shù)名稱即可保證參數(shù)相同。

:)