Как вызвать событие, если изменилось свойство отображения элемента?

Question

Что-то вроде:

element.addEventListener("displayChanged", function(){
    console.log("element.style.display changed.")
}, false);  

Конечно, там нет displayChanged, но мне интересно, как я могу это сделать?Требуется только поддержка Chrome.

Answer 1

Вы можете опросить с помощью setInterval и проверить изменения, используя что-то вроде:

<div onclick="this.style.display = 'none';">ha</div>
<script>
(function(){
  var elm = document.getElementsByTagName('DIV')[0],
    old = (elm.currentStyle || window.getComputedStyle(elm, false)).display,
    interval = setInterval(function(){
      var style = elm.currentStyle || window.getComputedStyle(elm, false);
      if(old !== style.display){
        clearInterval(interval);
        console.log('changed');
      }
    },120);
})();
</script>

Answer 2

Если вы изменяете свойство display элемента, то в этот самый момент вы можете использовать пользовательские события для запуска нового события.Если нет, вы можете использовать часы / unwatch.Я не знаю о них.Я просто знаю, что они могут быть полезны.:)