Chrome没有引发调整大小事件

Question

如果您看这个小提琴： http : //jsfiddle.net/umjcd/4/

HTML：

<h1>Instructions</h1>
<ol>
    <li>Click on Resize Button</li>
    <li>Observe no resize event is raised</li>
    <li>Click on Check Height button</li>
    <li>Observe height has changed</li>
</ol>
<button id="button">Resize</button>
<button id="button2">Check Height</button>
<br/>
<div id="map" style="position:fixed;width:600px;height:0px;border:1px solid black;">
    <div id="root" style="position:absolute;left:0px;right:0px;top:0px;bottom:0px;border:1px solid red"/>
</div>

Javascript：

var button = document.getElementById('button');
button.addEventListener('click', process);

var root = document.getElementById('root');
root.addEventListener('resize', resize);

var console = document.getElementById('console');
var map = document.getElementById('map');

var button2 = document.getElementById('button2');
button2.addEventListener('click', function () {
    log(root.offsetHeight);
});
log('ready to log');

function process() {
    map.style.height = '400px';
}

function resize() {
    var w = root.offsetWidth;
    var h = root.offsetHeight;
    log('resize event raised, dimensions are ' + w + " x " + h);
}

function log(text) {
    console.appendChild(document.createTextNode(text));
    console.appendChild(document.createElement('br'));
}

resize div大小时，Chrome不会引发resize事件。 这是错误，还是可以吗？ 在IE和FF中， e.onresize返回undefined但在Chrome中， e.onresize返回null ，其中e是HTML div 。 Chrome调试器中的intellisense在e上检测到onresize属性。 它应该返回undefined的chrome吗？ IE和FF支持resize但仅在window对象上。 我找不到合适的文档来解释何时应该提高resize以及Chrome是否支持非window对象。

Answer 1

根据W3C规范：

调整文档视图的大小后，用户代理必须调度此事件。

http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize

resize窗口大小时，将触发resize事件，而不是您选择的任何元素。