addEventListener多次触发，removeEventListener不生效问题

这两天写了个小功能封装成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)

成功啦！ 这是参考addEventListener()与removeEventListener(),追加事件和删除追加事件 - Sarah119 - 博客园这里的例子，我也是看了这个大神的文章理解的~

这样每次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)
    })
}