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/

我想对属性的更改（selectedon<option>或valueon <select>）做出反应，任何关于为什么观察者不做出反应的建议都非常受欢迎！

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

UPD。

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

如果您也觉得这个问题很烦人，请对这些错误发表评论并投票。

score 4 · Accepted Answer

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

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

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

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

1 回答 1

Related

Reference