javascript - 只能调用一次的函数

Question

所以我遇到了一个问题，如果我继续将注意力集中在文本框之外，则会一遍又一遍地创建图像，我只想创建一次图片，并且如果我决定单击文本框并焦点远离它，我不想创建更多图像，所以只是一个完成类型的功能。我尝试尝试删除 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>

Answer 1

使用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>