如何侦听选择框何时附加选项？

Question

我有一个选择框，我想知道另一个 js 函数何时向它附加一个选项。发生这种情况时是否触发了任何事件？

$('select').append('<option>Option 3</option>');
$('select').on('option_appended', function() {
    console.log('Option appended to select box');
});

更改不起作用：http : //jsfiddle.net/CuQjV/

Answer 1

最新的方法是Mutation Observers但支持并不广泛，旧的弃用方法是Mutation Events，它不是非常可靠，有些会严重降低 DOM 的性能。你可以这样做。

避免 DOM 突变事件监听器

向文档添加 DOM 突变侦听器会禁用大多数 DOM 修改优化，并严重降低对该文档进行进一步 DOM 修改的性能。此外，移除听者并不能逆转损害。因此，应尽可能避免以下事件：DOMAttrModified、DOMAttributeNameChanged、DOMCharacterDataModified、DOMElementNameChanged、DOMNodeInserted、DOMNodeInsertedIntoDocument、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMSubtreeModified

HTML

<select id="watch">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
<button id="add">Add</button>

Javascript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function () {
    "use strict";

    if (typeof window.MutationObserver !== "function") {
        window.MutationObserver = window.WebKitMutationObserver || window.MozMutationObserver;
    }

    var watch = document.getElementById("watch");

    function whenClicked() {
        var option = document.createElement("option");

        option.appendChild(document.createTextNode("Option" + Date.now()));
        watch.appendChild(option);
    }

    document.getElementById("add").addEventListener("click", whenClicked, false);

    if (typeof window.MutationObserver !== "function") {
        watch.addEventListener("DOMNodeInserted", function (evt) {
            console.log("New element detected", evt.target);
        }, false);
    } else {
        var observer = new window.MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.type === 'childList') {
                    console.log("New element detected", mutation.addedNodes[0]);
                }
            });
        });

        observer.observe(watch, {
            childList: true,
            characterData: true,
            subtree: true
        });
    }
}());

在jsfiddle 上

注意：我addEventListener在这个例子中使用的，也不是跨浏览器的，搜索addevent找到一个跨浏览器的功能。或者使用给定 MDN 页面上的那个。我还使用Array.prototype.forEachwhich 是 ECMA5 方法，但有垫片，或者您可以使用foror重写while。