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/

我想对属性的更改做出反应（selected上的<option>或value上的<select>），任何有关观察者没有反应的建议都超过了欢迎！

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

UPD。

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

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

Answer 1

@gryzzly，我已经通过详细回复更新了Chromium错误：http://code.google.com/p/chromium/issues/detail?id=128991#c4

Mutation观察者仅限于观察DOM序列化状态。如果你想知道Mutation Observers是否可以观察到某些东西，只是看看元素的innerHTML输出。如果你可以看到状态的变化反映在标记的变化中产生，然后突变观察者应该能够听到它

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

选择框属性更改时，不会触发Webkit Mutation Observer回调

1 个答案: