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 <option>或value <select>(，任何关于为什么观察者没有反应的建议都是非常受欢迎的！

我正在Mac OS X上的Chrome 18.0.1025.168中对此进行测试.生产代码当然也会为构造函数和无前缀版本提供moz前缀，这是测试代码。

上。

也在Firefox Nightly中测试了代码，它的行为方式与Chrome以及Chrome Canary相同。我已经为两个浏览器填充了错误：

• https://bugzilla.mozilla.org/show_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 这样的输入事件可能是你最好的选择。