用于隐藏元素的EventListener

Question

我试图找到一个Javascript事件，当元素的Display设置为none时将触发该事件。 style="display: none;"。

我不得不使用vanilla JS（不能使用jQuery），遗憾的是，无法实现Mutation Observer作为可能的解决方案。

换句话说，我试图找到一个与Element.addEventListener一起使用的事件。

是否有任何其他事件在隐藏元素时被触发？

Answer 1

不幸的是，元素隐藏时没有事件。从逻辑上讲，你可以使用onchange事件，但这只适用于<select>, <option>, <form>。

在这种情况下我应该做的是找到你的元素被隐藏并在其上携带事件。或者甚至更好的是找到它被隐藏的事件（即使你使用插件，你可以在源代码中找到它）。

例如，如果您知道单击一次按钮，它就会隐藏。在你的DOM上携带超过1个事件是可以的。

Answer 2

一种可能的方法是使用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>