EventListener for hiding an Element

Question

I am trying to find a Javascript event that will be triggered when an element's Display is set to none. style="display: none;".

I have to use vanilla JS (cannot use jQuery) and, unfortunately, cannot implement Mutation Observer as a possible solution.

In other words, I am trying to find an event to use with Element.addEventListener.

Is there any other event that gets triggered when an element is being hidden?

You've effectively closed the possible solution out. The only way left is to call a function in the same function which sets the display of an element. — Teemu, Mar 13 '19 at 09:13
https://stackoverflow.com/questions/1462138/js-event-listener-for-when-element-becomes-visible — maximelian1986, Mar 13 '19 at 09:15
the solution left here is to use a `method` to set style rule and then process what you wanted instead of doing that with `css`. — Abhinaw Kaushik, Mar 13 '19 at 09:19

score 0 · Answer 1 · answered Mar 13 '19 at 09:21

Unfortunately there is no event on when elements hides. Logically you could use onchange event but this is only for <select>, <option>, <form>.

What should I do in this case is find when your element becomes hidden and carry event on that. Or even better is to find that event on which it becomes hidden (even if you use plugin, you can find it in source code).

For example if you know that once button clicked, it hides. It's ok to carry more then 1 event on your DOM.

score 0 · Answer 2 · answered Mar 13 '19 at 09:22

A possible way is to use setInterval and getComputedStyle to check the style displayed

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>

EventListener for hiding an Element

2 Answers2