Удалить обработчик события?

Question

[Ланселот]

Здравствуйте. А не подскажите. Есть блок, при рассрытии блока устанавливается высота. Дальше когда меняется размер окна нужно менять и высоту этого блока. Но как правильно удалить обработчик resize window при закрытии блока?
Сейчас как бы неработает

window.removeEventListener("resize", onResizeBody);

это и логично потому что при клике закрытия по сути создется новое функциональное выражения onResizeBody.

const list = document.querySelectorAll(".item");

const onClick = (evt) => {
 const item = evt.currentTarget;
 item.classList.toggle("item--active");

 const itemBody = item.firstElementChild;
 const onResizeBody = () =>
  console.log(item.dataset.id);
  itemBody.style.setProperty("--height", `${itemBody.scrollHeight}px`);

 if (item.classList.contains("item--active")) {
  onResizeBody();
  window.addEventListener("resize", onResizeBody);
 } else {
  itemBody.style.setProperty("--height", 0);
  window.removeEventListener("resize", onResizeBody);
 }
};

list.forEach((el) => el.addEventListener("click", onClick));

<div class="item" data-id="1">1
 <div class="item__body">
  <div class="item__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum voluptates quo cum! Aliquid magnam eius quo iure at voluptas explicabo repellendus earum eum. Consectetur, iste, delectus omnis asperiores repudiandae blanditiis, neque ad odio dolorum sequi ducimus praesentium sapiente ab mollitia distinctio debitis labore? Quae delectus molestiae eius porro perferendis iure.</div>
 </div>
</div>


<div class="item" data-id="2">2
 <div class="item__body">
  <div class="item__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita, adipisci? Deserunt debitis illo repellendus consequuntur natus earum possimus at sed.</div>
 </div>
</div>

<div class="item" data-id="3">3
 <div class="item__body">
  <div class="item__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda officiis tempore laborum, hic veritatis nostrum facilis at velit eos, molestiae est excepturi? Est aspernatur, dolores similique nostrum necessitatibus quam sed corrupti magnam earum eveniet. Est, voluptates soluta porro eaque fugiat accusantium excepturi molestiae, quis ut quod repudiandae magni assumenda. Repellendus doloremque optio itaque sequi? Optio accusamus expedita quos debitis? Veniam fuga, accusantium eaque quibusdam ab error corrupti consequatur iste expedita a dolorum iusto, alias dignissimos id adipisci quasi. Error quisquam, quia adipisci ex quasi obcaecati asperiores soluta, hic aspernatur aperiam provident! Ipsum quod cumque hic ipsam minima fugit saepe perferendis?</div>
 </div>
</div>

.item {
  min-height: 20px;
  border: 2px solid green;
  margin-bottom: 15px;
}


.item__body {
  --height: 0; 
   height: var(--height);
   overflow: hidden;
 transition: height 1s;
}

Как вариант вижу сделать глобальную переменную и туда добавлять колбеки.

const openElements = new Map();


const list = document.querySelectorAll(".item");

const onClick = (evt) => {
 const item = evt.currentTarget;
 item.classList.toggle("item--active");

 const itemBody = item.firstElementChild;
 const onResizeBody = () => {
  console.log(item.dataset.id);
  itemBody.style.setProperty("--height", `${itemBody.scrollHeight}px`);
 }

 if (item.classList.contains("item--active")) {
  onResizeBody();
  openElements.set(item.dataset.id, onResizeBody)
   window.addEventListener("resize", onResizeBody);
 } else {
  itemBody.style.setProperty("--height", 0);
  window.removeEventListener("resize", openElements.get(item.dataset.id));
  openElements.delete(item.dataset.id);
 }
};

list.forEach((el) => el.addEventListener("click", onClick));

Но может есть лучше решение без глобальной переменной? Спасибо.

Comments

[Сергей Сергей]

https://stackoverflow.com/questions/9046741/get-ev...

Если попробовать функцию прямо к элементу как свойство привязывать?

Или переписать функции, через onClick только определяются активные элементы, а в onResizeBody работать с ними. Пусть и через глобальную переменную, но так не придётся "жонглировать" событиями, только с множеством элементов. onResizeBody можно не отвязывать, будет просто пустое множеством активных элементов.