好久沒來啦，最近煩心的事好多，得好好穩定下自己情緒。

這兩天寫了個小功能封裝成api供別人使用，在開發中遇到了些問題，記錄下。

專案情況是有地方觸發多次執行這部分程式碼，所以我想在每次add前先remove掉。

用addEventListener繫結事件，但是addEventListener可以給同一元素多次繫結同一事件，導致多次觸發。

然後就想到用removeEventListener來移除之前繫結的事件。但是，一切都沒有那麼順利...

第一次嘗試：

var clearBtn = document.querySelector('.clear_handPanel')

// 無效
clearBtn.removeEventListener('click', function () {
    console.log(111)
})

clearBtn.addEventListener('click', function () {
    console.log(111)
})
 

但是這樣是無效的，監聽的事件看起來和移除的事件是一樣的，但是兩個方法並不相同，他們的記憶體是不用的，這點在使用時一定要注意。

第二次嘗試：

var clearBtn = document.querySelector('.clear_handPanel')

function handleClear () {
    console.log(111)
}

clearBtn.removeEventListener('click', handleClear)

clearBtn.addEventListener('click', handleClear)

這種處理若是先addEventListener再removeEventListener是可以把剛剛add的remove掉的。

但是，專案情況比較特殊，我這裡先removeEventListener是想把上一次add的remove掉，再重新add，這樣就不會觸發多次執行。但是問題又來了，再執行一次時，這個方法也重新聲明瞭，上一次add的function和這次remove的不是同一個function，他們的記憶體不同，所以這種寫法也行不通。

第三次嘗試：

var clickFun = null  // 定義在最外層，不會重新執行的地方

aa = function() {
    clickFun  && （window.removeEventListener("click",clickFun)）；
    clickFun = function(){
        alert("1")
    }
    window.addEventListener("click",clickFun)
}
setInterval(function(){
    aa ()
},2000)
 

成功啦！ 這是參考https://www.cnblogs.com/Sarah119/p/7825265.html這裡的例子，我也是看了這個大神的文章理解的~

這樣每次remove的都是上一次執行的function了。

最最最重要的是要知道，addEventListener和removeEventListener使用時操作的一定要是同一個function（同一記憶體）。

還有一種解決方式，不通過removeEventListener。為元素加一個屬性來識別是否已經有了事件。如果有，就不要再次加事件了。

var clearBtn = document.querySelector('.clear_handPanel')
if (clearBtn.getAttribute("addClickHandleFlag") !== "1") {
    clearBtn.setAttribute("addClickHandleFlag","1")

    clearBtn.addEventListener('click', function () {
        console.log(111)
    })
}