@laufziner
Full stack Designer

Почему не удаляются EventListener у данного кода?

class Rating {
  constructor(rating) {
    this.self = this;
    this.rating = rating;
    this.stars = this.rating.querySelectorAll(".rating__stars__star");
    this.average = this.rating.querySelector("#rating__info__average");
    this.votes = this.rating.querySelector("#rating__info__votes");

    this.modalWindow = this.rating.querySelector('.modal');
    this.modalOverlay = document.querySelector('.modal-overlay');
    this.hideModal();

    this.data = {
      value: 0,
      average: 4.5,
      votes: 10,
    };

    for (let star of this.stars) {
      star.addEventListener("mouseover", this.mouseOverStar.bind(this));
      star.addEventListener("mouseout", this.mouseOutStar.bind(this));
      star.addEventListener("click", this.clickOnStar.bind(this));
    }

    for (let star of this.stars) {
      star.removeEventListener("mouseover", this.mouseOverStar);
      star.removeEventListener("mouseout", this.mouseOutStar);
      star.removeEventListener("click", this.clickOnStar);
    }

    this.updateInfo();

    this.rating.querySelector('.modal__close').addEventListener('click', (e) => {
        this.hideModal();
    })
  }

  hideOverlay() {
    this.modalOverlay.classList.add('hide');
  }

  showOverlay() {
    this.modalOverlay.classList.remove('hide');
  }

  getStars() {
    return this.stars;
  }

  mouseOverStar(e) {
    let dataId = e.target.getAttribute("data-id");
    for (let i = 0; i < dataId; i < i++) {
      this.getStars()[i].src = "/img/star-active.svg";
    }
  }

  mouseOutStar(e) {
    let dataId = e.target.getAttribute("data-id");
    for (let i = 0; i < dataId; i < i++) {
      this.getStars()[i].src = "/img/star-disable.svg";
    }
  }

  clickOnStar(e) {
    this.data.value = e.target.getAttribute("data-id");
    this.removeAllListeners();
    if (this.data.value > 3) this.showModal();
    this.data.votes++;
    this.updateInfo();
  }

  removeAllListeners() {
    for (let star of this.stars) {
      star.removeEventListener("mouseover", this.mouseOverStar.bind(this));
      star.removeEventListener("mouseout", this.mouseOutStar.bind(this));
      star.removeEventListener("click", this.clickOnStar.bind(this));
    }
  }

  updateInfo() {
    this.average.innerText = this.data.average;
    this.votes.innerText = this.data.votes;
  }

  showModal() {
    this.modalWindow.classList.remove('hide')
    this.showOverlay();
  }

  hideModal() {
      this.modalWindow.classList.add('hide');
      this.modalOverlay.classList.add('hide');
  }
}

let ratings = [];
for (rating of document.querySelectorAll(".rating")) {
  ratings.push(new Rating(rating));
}
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
потому что
this.mouseOverStar.bind(this) не равно this.mouseOverStar.bind(this) и неравно this.mouseOverStar

Если сомневаетесь
попробуйте выполнить следующий код и посмотрите вывод в коноль
function test(){
   console.log("test");
}


// проверим
console.log(test===test.bind(this));  // false
console.log(test.bind(this)===test.bind(this));  //false


// а как тогда?
const test_bind = test.bind(this);
console.log(test===test);  // true
console.log(test_bind===test_bind);  //true
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽