如何解决删除EventListener失败？

Question

我想在函数完成后停止 eventListener， 这是插图：

我制作了一个图标，点击它会显示input form，然后当我的光标clicked 或mouseover 在该输入下方再次显示button 搜索，但是当我一次又一次点击时，按钮搜索继续在下面添加元素按钮，

代码如下：

 let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
     let newEl = document.createElement("input");
      newEl.id   = "inPut"
      newEl.type = "text";
      newEl.name = "foo";
      newEl.value = "";
      newEl.placeholder  = "type your city";
     let oldEl = document.querySelector("#pic")

     //parentEL
     let parentEl = document.querySelector( ".addCity" )
      parentEl.replaceChild( newEl, oldEl )

     let btN = document.querySelector( "#inPut" ).addEventListener( "click", () => {
       btN = document.createElement( "button" )
       btN.class = "btn0"
       btN.textContent = "search"
       let _input  = document.querySelector("#inPut")
       _input.after(btN)
// tried wrote  code removeEventListener also, but nothing error and cant make the event stop

      }) end the btN

      // console.log(btN)

   // let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

    }) // end  the FunFun

我上面的代码在控制台上没有错误，我试图将 removeEven 监听器放在函数 btN 的下面，它得到了错误，就像上面的代码一样，

我试图在上面的函数上编写这样的代码：

.addEventListener("click", myFunction, true) // false

.removeEventListener("click", myFunction, true) // false

上面我切换了真假，还是什么都没有

在我的功能 addeventlistener 工作后，当我单击 input 表单元素时，按钮的一些图片显示得越来越多

Answer 1

Anonymous Event Listeners cannot be removed

首先你必须声明一个函数eventHandler作为你的事件监听器，然后用removeEventListener删除它

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   let cityInput = document.querySelector( "#inPut" )
   cityInput.after(btN)

   // Remove the eventListener just after the first call
   cityInput.removeEventListener('click' , eventHandler, true)
}

选择输入元素并将其存储为变量。

let cityInput = document.querySelector( "#inPut" ); // select the input element
cityInput.addEventListener( "click", eventHandler, true) // add a non-anonymous function as event listener

let FunFun = document.querySelector( "img#pic" ).addEventListener( "click", () => {
 let newEl = document.createElement("input");
  newEl.id   = "inPut"
  newEl.type = "text";
  newEl.name = "foo";
  newEl.value = "";
  newEl.placeholder  = "type your city";
 let oldEl = document.querySelector("#pic")

 //parentEL
 let parentEl = document.querySelector( ".addCity" )
  parentEl.replaceChild( newEl, oldEl )

let eventHandler = () => {
   btN = document.createElement( "button" )
   btN.class = "btn0"
   btN.textContent = "search"
   cityInput.after(btN)

   cityInput.removeEventListener('click' , eventHandler, true)
}

let cityInput = document.querySelector( "#inPut" );
cityInput.addEventListener( "click", eventHandler, true) // end the btN
 
  // console.log(btN)

// let buttnRm = document.querySelector("#inPut").removeEventListener("click", () => {  console.log("test" )});

}) // end  the FunFun

#pic {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

<div class='addCity'>
  <img src='something.jpg' id='pic'>
</div>