javascript - 选择框属性更改时未触发 Webkit Mutation Observer 回调

Question

我正在尝试使用新的 Mutation Observer 来监控选择框(或嵌套的 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/

我想对属性的更改使用react(selected 在 <option> 上或 value 在 <select> 上)，非常欢迎任何关于为什么观察者不 react 的建议!

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

UPD。

还在 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 bug 并提供了详细的回复:http://code.google.com/p/chromium/issues/detail?id=128991#c4

Mutation Observers are limited to observing the DOM serialized state. If you'd like to know if Mutation Observers can observe something, just do take a look at what innerHTML outputs for the element. If you can see the change in state reflected in changes to the markup which that produces, then Mutation Observers should be able to hear about it.

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