javascript addEventListener 在 OOPS 中注册多个事件

Question

function myclass(){
 var _d =document,_w = window,self=myclass;

var addEvent = function (el,e,callback,capture){
    var evt = _w.event;
    if(_w.addEventListener){
      el.addEventListener(e,callback,capture);         
    }else el.attachEvent("on"+e,callback,capture); 

   }
   var removeEvent = function (el,e,callback){ console.log("rmv")
      if(window.removeEventListener)
       el.removeEventListener(e,callback);
    else el.detachEvent("on"+e,callback);
 }

 function startWork(params){
  self.cfUrl  = params.createfolder || ""; 
   var cf = select('[data-action="createfolder"]');
    addEvent(cf,'click',mymethod);   

  }      
  return {         
    addEvent:addEvent,
    init:startWork,
    removeEvent:removeEvent,
 };   
 }     

当我使用我的 Javascript oop 方法单击注册元素时，它运行该事件我单击元素多少次？

例如:单击“创建文件夹”链接，然后单击“创建”按钮，单击“创建文件夹”链接多少次。同时发出请求。

这里是完整代码jsFiddle代码链接:https://jsfiddle.net/pm6bs5x9/

Answer 1

您需要明确禁用“创建文件夹”按钮，直到请求完成。然后，在请求完成后，您重新激活该按钮。基本上，您可以像下面的示例一样获得对该按钮的引用:

var btn = document.getElementById(buttonID);
btn.disabled =true;

然后，在成功返回 XHR 后，您可以通过执行以下操作重新启用该按钮:

btn.disabled = false;

所有这一切的原因是该元素无法告诉您您希望它只触发一次。因此，一旦将监听器附加到元素，它就知道监听其指定类型的每个事件，无论该事件发生多少次。

为了防止这种情况发生，您必须明确指示它在当前请求完成之前不要响应任何进一步的请求。您可以通过禁用它直到当前请求返回来完成此操作。