在 javascript 中重写事件监听器

Question

我试图覆盖添加按钮的事件处理程序以在单击更改事件按钮后进行更新。但代码不起作用

document.getElementById("test").addEventListener("click",function(){
  add();		
  document.getElementById("change_event").value="Now change the event";
  document.getElementById("change_event").style.display="block";
});

document.getElementById("change_event").addEventListener("click",function(){

  document.getElementById("test").value="Update";
  document.getElementById("change_event").style.display="none";
  
  document.getElementById("test").addEventListener("click",function(){
      update();		
  });		
});

function add(){
  alert("Add");
}
function update(){
  alert("Update");	
}

<input type="button" value="add" id="test" name="add">
<input type="button" name="change_event" style="display: none" value="change Event" id="change_event">
    	

当我单击“添加”时，该add()函数将调用。当我单击Now change the event更新按钮时出现，单击更新按钮后必须调用更新函数。

add()我的问题是，第一次更新按钮调用功能。当我单击更新时，只需update()调用

Answer 1

您应该使用的是removeElementListener()取消注册该add()函数并注册该update()函数：

document.getElementById("test").addEventListener("click", eventListenerAdd);
document.getElementById("change_event").addEventListener("click", eventListenerUpdate);

function eventListenerAdd(){
    add();      
    document.getElementById("change_event").value="Now change the event";
    document.getElementById("change_event").style.display="block";

};


function eventListenerUpdate(){
    document.getElementById("test").value="Update";
    document.getElementById("change_event").style.display="none";
    document.getElementById("test").removeEventListener("click", eventListenerAdd);
        document.getElementById("test").addEventListener("click",function(){
            update();       
        });   
};

function add(){
    alert("Add");
}
function update(){
alert("Update");    
}

<input type="button" value="add" id="test" name="add">
<input type="button" name="change_event" style="display: none" value="change Event" id="change_event">

正如您所看到的，您需要将事件侦听器添加为具有名称的实际函数，以便删除它们。