window.addEventListener 如何防止同一元素多次绑定同一事件 触发多次？？

Question

问题：
一下代码中： div 多次绑定 click 事件 ，绑定一次 ， 点一下 触发一次 ， 绑定2次 ， 点一下，触发两次 。 有没有办法减少 div.addEventListener 绑定的 click 事件的次数？？ 我尝试过的：

    // 无论事件是否存在 ， 先移除 
    div.removeEventListener
    
    // 无时间是否存在 ， 添加
    div.addEventListener

这样做 ， 没有效果（绑定2次， 仍然触发两次 ， 三次触发三次） .... 有没有办法做到:

div.onclick = function(){ ... } 

类似与这样的效果（就是不产生事件队列） ， 而是不断的重写事件（类似于 js的函数重载）
描述的不是太清楚 ， 请耐心看完，谢谢

html :

<div class='loginEvent'>绑定</div>
<div class='div'>这是一个测试按钮</div>

var div = document.getElementsByClassName('div')[0];
var bindBtn = document.getElementsByClassName('loginEvent')[0];

// 通过此按钮 可以 让 对元素 div 绑定多次click事件
bindBtn.addEventListener('click' , loginEvent ,false);

// 注册 div 事件
function loginEvent(){
  div.addEventListener('click' , sayHello ,false);
}

// div 事件触发内容
function sayHello(){
   console.log('hello');
}

Answer 1

我在 Chrome 60 下测试:

var a = (function () { var i = 0; return function () {console.log(i ++ )};})();

document.addEventListener('click', a)
document.addEventListener('click', a)
document.addEventListener('click', a)

// click!
// 0
// click!
// 1
// 换做 divEle.addEventListener 同样的结果

也就是说·同一元素多次绑定同一事件·只会触发一次，还是浏览器新版更新了？

Answer 2

removeEventListener 应该是没有问题的，很有可能是 removeEventListener 写法不对，能把你这部分在问题里详细补充一下吗，你的问题里只是说明了一下 APi，没有看到传入的参数。

Answer 3

绑定事件前先移除一次呢？如

bindBtn.removeEventListener('click' , loginEvent ,false);

另外就是自己实现一个绑定解绑的工具函数，通过工具函数来绑定解绑事件。

这样你就可以控制绑定次数了

Answer 4

你还不如换个思路，初始化先绑定一个函数就别动了，随后改动这个函数。

var loginEvent = function() {};

bindBtn.addEventListener('click' , loginEvent);

后面随时修改这个loginEvent

loginEvent = function() { alert('1'); };
loginEvent = function() { alert('2'); };
loginEvent = function() { alert('3'); };