使 onpropertychange 和 domattrmodified 工作以检测元素何时更改答案

【问题标题】：Making onpropertychange and domattrmodified work to detect when elements are changed使 onpropertychange 和 domattrmodified 工作以检测元素何时更改
【发布时间】：2011-04-21 06:17:11
【问题描述】：

应该触发一些东西，不是吗？我在 IE8 中不受支持，在 Fx 3.6.10 中没有发生任何事情

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>


// modified from http://pragmatec.blogspot.com/2009/06/google-toolbar-style-and-tooltip.html
jQuery(function($){
  $.fn.dommodhandler = function(options){
    function setListeners(){
      if (typeof (this.onpropertychange) == "object"){
        $('#innerDiv').bind('propertychange',function(e){
          $('#msgDiv').html(this.id+' changed</br/>');
        });
      }
      else if ($.browser.mozilla){
      $('#msgDiv').html("bind");
        $('#innerDiv').bind('DOMAttrModified',function(e){
          $('#msgDiv').html(this.id+' changed</br/>');
        });
      }
      else {
        $('#msgDiv').html('not supported in this browser');
        return false;
      }
    }
    return setListeners();
    }
  }
);
$(document).ready(function(){
  $.fn.dommodhandler ();
});

</script>
</head>
<body>
<div id="wrapper">
<a href="#" onClick="document.getElementById('innerDiv').height='300px';document.getElementById('innerDiv').innerHTML=new Date(); return false">Click</a>
  <div id="outerDiv">
    <div id="innerDiv">Hello</div>
  </div>
  <div id="msgDiv"></div>      
</div>  

</body>
</html>

更新：仍然不高兴...任何人有任何建议来检测什么时候（ajax）由于内容更大或更小而改变了 div 的实际高度

【问题讨论】：

我会将if (typeof (this.onpropertychange) == "object") 更改为if ("onpropertychange" in this)。在元素具有现有onpropertychange 处理程序的情况下，typeof 可以返回"function"。

标签： jquery dom javascript-events event-handling

【解决方案1】：

如果您确实更改了属性，则会触发事件 (FF 3.6.10)：http://jsfiddle.net/Nw4rA/

【讨论】：

有趣 - 当我改变高度时没有触发 - 所以你有什么建议我可以在内容改变 div 的大小时触发脚本，因为 onresize 不是在非触发-IE浏览器
这很棘手，afaik。听窗口的调整大小事件就足够了吗？ $(window).bind('resize', function(event) {...}) ？如果没有，您可能必须使用在更改 div 大小时触发的自定义事件。
这就是我认为我在上面所做的。它是在更改 div 的大小时触发的，而不是在我更改 div 的大小时触发。那只是一个演示