How to trigger an event if an element's display property is changed?

Something like:

element.addEventListener("displayChanged", fu开发者_StackOverflow中文版nction(){
    console.log("element.style.display changed.")
}, false);

Of course, there is no displayChanged there, but I'm wondering how can I do this? Only Chrome support is needed.

You can poll with a setInterval and check for the change using something like:

<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>

If you're changing the display property of the element, then at that very moment, you can use custom events to trigger a new event. If not, you can use watch/unwatch. I don't know about them. I just know that they could be useful. :)