Javascript中 非Window的DOM的onresize事件解决方案

Javascript 中onresize事件我们会在窗口大小发生改变的时候需要自适应的时候应用上，但是如果是这样的场景呢，那就需要想想其他的解决办法了：

场景1：先上图

页面是上下布局的，通过【上箭头】和【下箭头】控制下部div的大小，需求是：下面的图表需要实现根据DIV来实现图表重绘！  

在这种情况下，仅仅有window.onresize的话是不够的，我们需要对监听此DIV的resize从而达到图表的重新绘制功能，贴代码吧：

////this is a Jquery plugin function that fire an event when the size of an element changed //usage $().sizeChanged(function(){})(function ($) {$.fn.sizeChanged = function (handleFunction) {    var element = this;    var lastWidth = element.width();    var lastHeight = element.height();    setInterval(function () {        if (lastWidth === element.width()&&lastHeight === element.height())            return;        if (typeof (handleFunction) == 'function') {            handleFunction({ width: lastWidth, height: lastHeight },                           { width: element.width(), height: element.height() });            lastWidth = element.width();            lastHeight = element.height();        }    }, 100);    return element;};}(jQuery));

有了这段代码的话，我们需要在你需要的地方将对应的DOM绑定上对应的事件处理函数，参考例子：

$(that.dom).sizeChanged(that.myChart.resize);

如果仅仅只想解决你的问题，那倒这里就可以止步了。

**************************************华丽的分割线**************************************

一、相关资料和链接

链接1：http://stackoverflow.com/questions/10086693/jquery-resize-on-div-element

这个我建议好好看一下，很多种相关解决办法，上面的脚本其实也来自于这里；

链接2： http://stackoverflow.com/questions/8053583/jquery-resize-listener-on-a-div

二、实现原理（个人体会，如若不对请往死头喷）

1. 记录div 原来的height和width；

2. 使用setTimeout延时查看div的height和width与以前是不是有变化，如果有变化的话调用绑定的函数；

3. 重复第2步骤