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的menthod点击注册的元素时，它会运行事件我点击元素多少次？

例如：单击“创建文件夹”链接，然后单击“创建”按钮，单击创建文件夹链接的次数。请求发布同一时间。

以下是完整代码jsFiddle代码链接：https://jsfiddle.net/pm6bs5x9/

Answer 1

您需要明确禁用＆＃34;创建文件夹＆＃34;按钮，直到请求完成。然后在请求完成后，您重新激活该按钮。基本上，您可以像下面的设计示例那样获得对按钮的引用：

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

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

btn.disabled = false;

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

为了防止它，您必须明确指示它在当前请求完成之前不响应任何进一步的请求。这可以通过在当前请求返回之前禁用它来实现。

Answer 2

您只需在第一次调用后删除事件侦听器。

在回调函数本身内调用removeEvent()函数，但是你必须使用外部函数作为回调函数，因为使用ananymous函数你就不会像 {{3}中所说的那样使用removeEventListener。 } 文档。

这是一个简单的用例示例：

var _d = document,
  _w = window;

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);
}


var increment = function increment() {
  var inc = document.getElementById("inc");
  inc.value = parseInt(inc.value) + 1;
}

var clickme = document.getElementById("clickme");
addEvent(clickme, 'click', increment);


var increment2 = function increment2() {
  var inc2 = document.getElementById("inc2");
  inc2.value = parseInt(inc2.value) + 1;
  //Remove the event inside your callback
  removeEvent(clickme2, 'click', increment2);
}

var clickme2 = document.getElementById("clickme2");
addEvent(clickme2, 'click', increment2);

<p><h3>Without calling removeEvent</h3></p>
<input type="button" id="clickme" value="Click me!" />
<input type="text" id="inc" value="0" />

<p><h3>With removeEvent</h3></p>
<input type="button" id="clickme2" value="Click me once!" />
<input type="text" id="inc2" value="0" />

你只需要在你的例子中采用相同的逻辑。

Answer 3

 Here is solution 

 Don`t use anonymous function with addEventListener

 eg. addEvent(clear,"click",function(){
     //your code...
     }); 
  use 
   var CreateFolder = function (e){    
    var form = select(".form-create_folder"),
    clear = select(".form-create_folder a");
    form.style.top ="10px";
    addEvent(clear,"click",upit);  
    addEvent(form,'submit',submitit);   
   }
  function upit(e){ //your code }
  function submitit(e){ //your code }



 use separate handler with name as mentioned above...

javascript addEventListener在OOPS

3 个答案: