只能调用一次的函数

因此，我遇到了一个问题，如果我一直将注意力集中在文本框之外，就会一遍又一遍地创建图像，我只想一次创建图片，如果我决定单击文本框，然后专注于它，我不希望创建更多的图像，而只是一种完成的功能。我尝试使用remove EventListener进行实验，但这并没有为我做任何事情。

function validateData(validationType) {
  var alpha = /^[A-Za-z]+$/;

  if (validationType === "firstname") {
    var firstName = document.getElementsByName("firstname")[0];
    if (firstName.value.match(alpha)) {
      alert("Yes");
    } else {
      alert("No");
      image();
    }
  }
}

window.onload = function creator() {
  document.getElementsByName("firstname")[0].addEventListener('blur',() => validateData("firstname"));
}


function image() {
  var imgx = document.createElement("img");
  imgx.src = "https://i.imgur.com/pwLBEus.jpg";
  document.getElementById("imgsauce").appendChild(imgx);
  document.getElementsByName("firstname")[0].addEventListener('blur',image);
  document.getElementsByName("firstname")[0].removeEventListener('blur',image);
}

<h2>The Element</h2>
<input type="text" name="firstname" class="input">
<div id="imgsauce"></div>

使用EventTarget.addEventListener()的once选项：

document.getElementsByName("firstname")[0].addEventListener('blur',image,{
  once: true
});

function image() {
  console.log('once');
  var imgx = document.createElement("img");
  imgx.src = "https://i.imgur.com/pwLBEus.jpg";
  document.getElementById("imgsauce").appendChild(imgx);
}

<h2>The Element</h2>
<input type="text" name="firstname" class="input">
<div id="imgsauce"></div>

编辑

您现在遇到的问题是由于removeEventListener的细微差别。如果您再次传递该函数，则只能删除该函数作为侦听器：这意味着您永远无法使用该函数删除匿名函数。并且您添加了一个匿名函数。为简化起见，我将事情做成一个单独的函数，该函数在需要删除时对其进行引用。

document.querySelector('#namesauce').addEventListener('blur',listener);

function listener(event) {
  const validationType = event.target.name;
  if (validationType === "firstname") {
    if (/^[A-Za-z]+$/.test(event.target.value)) {
      console.log('Yes');
    } else {
      console.log('No');
      const imgx = document.createElement('img');
      imgx.src = "https://i.imgur.com/pwLBEus.jpg";
      document.querySelector('#imgsauce').appendChild(imgx);

      document.querySelector('#namesauce').removeEventListener('blur',listener);
    }
  }
}

<h2>The Element</h2>
<input id="namesauce" type="text" name="firstname" class="input">
<div id="imgsauce"></div>

原始答案：

window.onload = function creator() {
  document.getElementsByName("firstname")[0].addEventListener('blur',removeImage);
}

我不确定将removeImage传递到addEventListener会做什么，但是它不会做任何事情。相反，使您要传递的函数成为侦听器（image）也将其自身删除。像这样：

window.onload = function creator() {
  document.getElementsByName("firstname")[0].addEventListener('blur',image);
}

function image() {
  var imgx = document.createElement("img");
  imgx.src = "https://i.imgur.com/pwLBEus.jpg";
  document.getElementById("imgsauce").appendChild(imgx);
  document.getElementsByName("firstname")[0].removeEventListener('blur',image);
}

<h2>The Element</h2>
<input type="text" name="firstname" class="input">
<div id="imgsauce"></div>

由于您的新问题（在我的other answer的评论中）采用了不同的实现方式，因此我将其作为单独的答案。

如果您要做的只是根据成功或失败显示不同的图像，则这样做更简单。您不再需要担心删除侦听器，因此可以使用匿名函数。现在，这只是对问题的不同思考。

如果答案失败还是成功，则无需创建新图像，只需将其放入DOM中并将其隐藏-无论如何，您都将展示它。然后，您只需要在其中扔一些CSS（可选，只是为了保持DOM整洁）即可。

document.querySelector('#namesauce').addEventListener('blur',event => {
  const validationType = event.target.name;
  if (validationType === 'firstname') {
    let src = "";
    if (/^[A-Za-z]+$/.test(event.target.value)) {
      console.log('Yes!');
      src = "https://via.placeholder.com/200x200.png?text=Yes"
    } else {
      console.log('No!');
      src = "https://via.placeholder.com/200x200.png?text=No"
    }

    const imgx = document.querySelector('#result-img');

    // classList.remove does nothing if the class is not found
    imgx.src = src;
    imgx.classList.remove('hidden');
  }
});

.hidden {
  display: none;
}

<h2>The Element</h2>
<input id="namesauce" type="text" name="firstname" class="input">
<div id="imgsauce">
  <img id="result-img" src="" alt="" class="hidden">
</div>

P.S。，如果您不希望在<input>为空时收到大错误消息，只需抛出

if (event.target.value.length > 0) {
  // ...
}

在某处。

只能调用一次的函数

just483 回答：只能调用一次的函数

大家都在问