Как правильно удалить обработчик событий, чтобы он мог срабатывать несколько раз без перезагрузки страницы?

Question

Код ищет репозитории на гитхабе. Есть обработчики событий, но знаю, что хороший тон их удалять после работы. Если добавляю удаление, то событие срабатывает один раз, например один репозиторий добавляется и все. Как удалить обработчики событий без потери функциональности?

const searchForm = document.querySelector("input");
const searchFormContainer = document.querySelector(".dropdown-container");
const selectedRepository = document.querySelector(".chosens");

function a(event) {
  let target = event.target;
  if (!target.classList.contains("btn-close")) {

    return;
  }
  target.parentElement.remove();

};
selectedRepository.addEventListener("click", a);


function b(event) {
  let target = event.target;
  if (!target.classList.contains("dropdown-content")) {

    return;
  }

  addRepository(target);
  searchForm.value = "";
  removeRepository();

};
searchFormContainer.addEventListener("click", b);


function removeRepository() {
  searchFormContainer.innerHTML = "";
}

function showSelectedRepository(repositories) {
  removeRepository();

  for (let repositoryIndex = 0; repositoryIndex < 5; repositoryIndex++) {
    let name = repositories.items[repositoryIndex].name;
    let owner = repositories.items[repositoryIndex].owner.login;
    let stars = repositories.items[repositoryIndex].stargazers_count;

    let drop = `<div class="dropdown-content" data-owner="${owner}" data-stars="${stars}">${name}</div>`;
    searchFormContainer.innerHTML += drop;
  }
}

function addRepository(target) {
  let name = target.textContent;
  let owner = target.dataset.owner;
  let stars = target.dataset.stars;

  selectedRepository.innerHTML += `<div class="chosen">Name: ${name}<br>Owner: ${owner}<br>Stars: ${stars}<button class="btn-close"></button></div>`;
}

async function getSelectedRepository() {
  const urlSearchRepositories = new URL("https://api.github.com/search/repositories");
  let repositoriesPart = searchForm.value;
  if (repositoriesPart == "") {
    removePreds();
    return;
  }

  urlSearchRepositories.searchParams.append("q", repositoriesPart)
  try {
    let response = await fetch(urlSearchRepositories);
    if (response.ok) {
      let repositories = await response.json();
      showSelectedRepository(repositories);
    } else return null;
  } catch (error) {
    return null;
  }
}

function cancellation(fn, timeout) {
  let timer = null;

  return (...args) => {
    clearTimeout(timer);
    return new Promise((resolve) => {
      timer = setTimeout(
        () => resolve(fn(...args)),
        timeout,
      );
    });
  };
}

const deleteGetSelectedRepository = cancellation(getSelectedRepository, 500);
searchForm.addEventListener("input", deleteGetSelectedRepository);

body {
  background-color: #C4C4C4;
}

.dropdown {
  margin: 62px auto 0px auto;
  width: 500px;
}

.dropdown-container {
  min-height: 227px;
}

.dropdown input {
  border: none;
  font-size: 48px;
  line-height: 56px;
  width: 100%;
  box-sizing: border-box;
}

.dropdown-content {
  width: 100%;
  cursor: pointer;
  font-size: 30px;
  line-height: 35px;
  border: 2px solid #000;
  box-sizing: border-box;
  background-color: #E3E3E3;
}

.dropdown-content:hover {
  background-color: #65CDF9;
  cursor: pointer;
}

.chosens {
  width: 503px;
}

.chosen {
  display: flex;
  font-size: 24px;
  padding: 8px 16px;
  line-height: 28px;
  border: 1px solid #000;
  background-color: #E27BEB;
}

.btn-close {
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  background-repeat: no-repeat;
  background-image: url("https://e7.pngegg.com/pngimages/863/842/png-clipart-iphone-x-color-pink-pastel-fashion-spotlight-miscellaneous-blue.png");
  background-color: transparent;
  background-size: contain;
  outline: none;
  border: none;
  cursor: pointer;
  width: 42px;
  height: 38.5px;
  right: 17px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link href="style.css" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <div class="dropdown">
    <input name="search" type="text" value="" />
    <div class="dropdown-container">
    </div>
    <div class="chosens"></div>
  </div>
  <script src="index.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как правильно удалить обработчик событий, чтобы он мог срабатывать несколько раз без перезагрузки страницы?

Ответы (0 шт):