EventListener для сокрытия элемента

Question

Я пытаюсь найти событие Javascript, которое будет срабатывать, когда для элемента Display установлено значение none.style="display: none;".

Я должен использовать vanilla JS (не могу использовать jQuery) и, к сожалению, не могу реализовать Mutation Observer в качестве возможного решения.

Другими словами, я пытаюсь найтисобытие для использования с Element.addEventListener.

Есть ли какое-либо другое событие, которое запускается, когда элемент скрыт?

Answer 1

Возможный способ - использовать setInterval и getComputedStyle для проверки отображаемого стиля

var elem = document.getElementById('div');
var interval = setInterval((() => {
  if (window.getComputedStyle(elem).display === "none") {
    console.log('hidden');
    clearInterval(interval);
  }
}), 500);

setTimeout((() => elem.style.display = 'none'), 2000);

<div id='div'> Foo </div>

Answer 2

К сожалению, нет никаких событий, когда элементы скрываются. Логически вы можете использовать событие onchange, но это только для <select>, <option>, <form>.

Что я должен сделать в этом случае, так это найти, когда ваш элемент станет скрытым, и перенести событие на него Или еще лучше найти то событие, на котором оно скрыто (даже если вы используете плагин, вы можете найти его в исходном коде).

Например, если вы знаете, что после нажатия кнопки она скрывается. Можно переносить более одного события в вашей DOM.