javascript - 在 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() 函数将被调用。当我单击现在更改事件时，会出现更新按钮，单击更新按钮后必须调用更新函数。

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

Answer 1

添加事件时，它们会相互堆叠，这意味着同一元素上可以有多个单击事件，因此它们不会相互覆盖。您必须使用removeEventListener首先删除以前的事件，然后再分配新的事件

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

}

...

document.getElementById("test")
    .removeEventListener('click', eventWithAdd)
    .addEventListener('click', function () {update()});