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

Question

我正在尝试option使用新的Mutation Observer功能监视选择框(或嵌套元素)的更改.但是,只有"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/

我想对属性的变化做出反应(selectedon <option>或valueon <select>),对观察者为什么没有反应的任何建议都非常受欢迎!

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

UPD.

在Firefox Nightly中测试了代码,它的行为与Chrome和Chrome Canary中的行为相同.我填写了两个浏览器的bug:

• 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

突变观察者仅限于观察 DOM 序列化状态。如果您想知道突变观察者是否可以观察到某些内容，只需查看元素的innerHTML 输出即可。如果您可以看到状态的变化反映在所产生的标记的变化中，那么突变观察者应该能够听到它。

TL;DR：这正在按预期工作；要观察 IDL 属性（如 HTMLSelectElement.value）的更改，输入事件（如 onclick 或 onchange）可能是您的最佳选择。