选中框属性更改时未触发Webkit突变观察者回调

Question

我正在尝试监视具有新的option功能的选择框(或嵌套的突变观察者元素)的更改。然而，只有"setAttribute“触发了突变观察者对我的回调。

下面是我使用的代码：

~function(doc, $) {
    var select = $('select');

    // http://www.w3.org/TR/dom/#mutation-observers
    var observer = new WebKitMutationObserver(function(mutations) {
        alert(mutations.length + " mutations happened");
    });

    observer.observe(select, {
        // monitor descendant elements – changing `selected` attr on options
        subtree: true,
        attributes: true
    });

    // this triggers Observer's reaction, but doesn't update select box UI
    select.setAttribute('value', 'whee'); 
    // this updates select box UI, but doesn't trigger mutation observer's callback
    select.value = "whee";
    // this also updates the UI, but doesn't trigger mutation observer's callback
    select.getElementsByTagName('option')[0].selected = true;
    //
    // neither does manual selecting of options trigger mutation observer unfortunately :(

    button.addEventListener('click', function(e) {
        e.preventDefault();
        // my goal is to react to this change here 
        select.value = Math.random() > .5 ? "whee" : "whoa";
    }, false);

}(document, function(selector) { return document.querySelector(selector); });​

下面是这段代码，实际上是http://jsfiddle.net/gryzzly/wqHn5/

我想对属性的更改做出反应(selected on <option>或value on <select>)，任何关于观察者为什么不做出反应的建议都是非常受欢迎的！

我正在Mac上用Chrome18.0.1025.168进行测试。当然，生产代码也有一个构造函数的moz前缀和无前缀的版本，这是测试代码。

UPD.

在Firefox晚间也测试了代码，它的行为方式与Chrome一样，在Chrome中也是如此。我已经为这两种浏览器填充了这个bug：

• bug.cgi?id=757077
• https://code.google.com/p/chromium/issues/detail?id=128991

如果你也觉得这个问题很烦人，请评论并投票支持这些错误。

Answer 1

@gryzzly，我更新了Chromium，并给出了详细的响应：http://code.google.com/p/chromium/issues/detail?id=128991#c4

变异观察者仅限于观察DOM序列化状态。如果您想知道突变观察者是否能观察到什么东西，那么就看一下元素的innerHTML输出。如果您可以看到状态的变化反映在对所产生的标记的更改中，那么突变观察者应该能够听到它。

TL;DR:这是按预期工作的；要观察对IDL属性(如HTMLSelectElement.value )的更改，输入事件(如onclick或onchange )可能是最好的选择。