javascript - 观察 DOMNode 属性

Question

我需要一种方法来识别对象(DOMNode 类型)的属性是否发生了更改(或者被创建或删除，可选)。

我有一个 INPUT 元素，并且在修改属性 .value 时必须收到通知。问题是没有有一个 attr 定义，我可以使用 MutationObserver，是的，有一个属性定义 (input.value) 并且它不会触发观察者。

我可以使用最新的可用功能，因为我不会使用 IE (bwhahahah)。

编辑#1

我做this test显示:

1. 手动触发器可以工作，但我不能使用/期望这个；
2. 自动触发不起作用，但我喜欢这样；
3. __defineSetter__ 工作得很好，只是我无法在不停止“默认传播”的情况下使用它。

如果有任何方法可以让__defineSetter__继续到最后，就能解决这个问题。

Answer 1

您并没有真正说明您是否只是想跟踪用户对输入元素的更改或编程更改。对于新的浏览器，您可以监视 input 事件，它会告诉您用户控件何时更改了输入字段的值。除了 Hook 所有可能更改字段的代码以添加您自己的可能已应用更改的通知系统之外，没有跨浏览器的方法可以判断字段的值是否已以编程方式更改。

我不久前编写了这个跨浏览器函数，用于监视所有浏览器中用户对输入字段的所有各种形式的更改。该代码恰好采用 jQuery 方法的形式，但可以相当轻松地将逻辑修改为纯 JavaScript。此代码检查是否支持新事件。如果是这样，它就会使用它们。如果没有，它会 Hook 许多其他事件来 try catch 用户更改字段的所有可能方式(拖/放、复制/粘贴、键入等)。

(function($) {

    var isIE = false;
    // conditional compilation which tells us if this is IE
    /*@cc_on
    isIE = true;
    @*/

    // Events to monitor if 'input' event is not supported
    // The boolean value is whether we have to 
    // re-check after the event with a setTimeout()
    var events = [
        "keyup", false,
        "blur", false,
        "focus", false,
        "drop", true,
        "change", false,
        "input", false,
        "textInput", false,
        "paste", true,
        "cut", true,
        "copy", true,
        "contextmenu", true
    ];
    // Test if the input event is supported
    // It's too buggy in IE so we never rely on it in IE
    if (!isIE) {
        var el = document.createElement("input");
        var gotInput = ("oninput" in el);
        if  (!gotInput) {
            el.setAttribute("oninput", 'return;');
            gotInput = typeof el["oninput"] == 'function';
        }
        el = null;
        // if 'input' event is supported, then use a smaller
        // set of events
        if (gotInput) {
            events = [
                "input", false,
                "textInput", false
            ];
        }
    }

    $.fn.userChange = function(fn, data) {
        function checkNotify(e, delay) {
            var self = this;
            var this$ = $(this);

            if (this.value !== this$.data("priorValue")) {
                this$.data("priorValue", this.value);
                fn.call(this, e, data);
            } else if (delay) {
                // The actual data change happens aftersome events
                // so we queue a check for after
                // We need a copy of e for setTimeout() because the real e
                // may be overwritten before the setTimeout() fires
                var eCopy = $.extend({}, e);
                setTimeout(function() {checkNotify.call(self, eCopy, false)}, 1);
            }
        }

        // hook up event handlers for each item in this jQuery object
        // and remember initial value
        this.each(function() {
            var this$ = $(this).data("priorValue", this.value);
            for (var i = 0; i < events.length; i+=2) {
                (function(i) {
                    this$.on(events[i], function(e) {
                        checkNotify.call(this, e, events[i+1]);
                    });
                })(i);
            }
        });
    }
})(jQuery);