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

Question

[Денис Рамусь]

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));
}

Answer 1

[Роман]

потому что
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

Comments

[Денис Рамусь]

Не могли бы вы мне указать строчки кода, в которых я совершил ошибку?

[Роман]

laufziner, пожалуйста

в этих

star.addEventListener("mouseover", this.mouseOverStar.bind(this));
star.addEventListener("mouseout", this.mouseOutStar.bind(this));
star.addEventListener("click", this.clickOnStar.bind(this));

и этих

star.removeEventListener("mouseover", this.mouseOverStar.bind(this));
star.removeEventListener("mouseout", this.mouseOutStar.bind(this));
star.removeEventListener("click", this.clickOnStar.bind(this));

[Денис Рамусь]

Роман, спасибо большое)

[Роман]

laufziner, немного объясню. Для того, чтобы функция .removeEventListener(...) сработала, нужно передать ей вторым аргументом ту же самую функцию, что и была установлена как слушатель в функции .addEventListener(...)
а так как вызов функции с биндом каждый раз создает новую функцию, то:
this.mouseOverStar.bind(this) НЕРАВНО this.mouseOverStar.bind(this)
this.mouseOutStar.bind(this) НЕРАВНО this.mouseOutStar.bind(this)
this.clickOnStar.bind(this) НЕРАВНО this.clickOnStar.bind(this)
и следовательно .removeEventListener(...) не сработает

[Денис Рамусь]

Роман, Большое спасибо, вы мне очень помогли)

[Роман]

laufziner, вот небольшой пример, показывающий как сделать то что вы хотите без биндов

https://jsfiddle.net/lastuniverse/8147sjhq/1/