javascript - window.addEventListener 如何防止同一元素多次绑定同一事件触发多次？？-PHP中文网问答

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

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

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

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

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

html :

绑定
这是一个测试按钮

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

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

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

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

全部回复(3)

ringa_lee2017-04-11 12:03:20 3楼

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

赞 +0

添加回复

PHP中文网2017-04-11 12:03:20 2楼

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

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

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

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

黄舟2017-04-11 12:03:20 1楼

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

var loginEvent = function() {};

bindBtn.addEventListener('click' , loginEvent);

后面随时修改这个loginEvent

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