Javascript 观察DOMNode属性

我需要一种方法来识别一个对象（类型为DOMNode）的属性已经发生了变化（或者被创建或删除，可选）

我有一个输入元素，在修改属性

.value

时必须通知我。问题是没有一个attr定义，我可以使用MutationObserver，还有一个属性定义（

input.value

），它不会触发观察者

我可以使用最新的功能，因为我不会使用IE（bwhahahah）

编辑#1

我想表明：

手动触发器工作，但我不能使用/期望它

自动触发不起作用，我喜欢这样

\uuuuu defineSetter\uuuuuu

工作得非常好，只是如果不停止“默认传播”，我就无法使用它

---

如果有任何方法允许

\uuuu defineSetter\uuuuu

一直持续到最后，就会解决这个问题。

您实际上并没有说您只是在尝试跟踪用户对输入元素的更改还是编程更改。对于新浏览器，您可以监视

input

事件，当用户控件更改了输入字段的值时，它会告诉您。除了挂接所有可能更改字段的代码以添加您自己的更改通知系统外，没有跨浏览器的方法来判断字段的值是否已通过编程方式更改

我不久前编写了这个跨浏览器函数，用于监视所有浏览器中用户对输入字段的各种形式的更改。这段代码恰好是jQuery方法的形式，但是可以很容易地将逻辑修改为纯javascript。此代码检查是否支持newish事件。如果是的话，它会使用它们。如果没有，它会钩住许多其他事件，试图捕获用户更改字段的所有可能方式（拖放、复制/粘贴、键入等）

（函数（$）{
var-isIE=false；
//条件编译，它告诉我们这是否是IE
/*@抄送
伊西=真；
@*/
//如果不支持“输入”事件，则要监视的事件
//布尔值是我们是否必须
//使用setTimeout（）在事件发生后重新检查
var事件=[
“keyup”，假的，
“模糊”，假，
“聚焦”，错误，
“滴”，没错，
“改变”，错，
“输入”，错误，
“文本输入”，错误，
“粘贴”，没错，
“切”，没错，
“复制”，没错，
“上下文菜单”，对
];
//测试是否支持输入事件
//它在IE中太多了，所以我们在IE中从不依赖它
如果（！isIE）{
var el=document.createElement（“输入”）；
var gotInput=（el中的“oninput”）；
如果（！gotInput）{
el.setAttribute（“oninput”，“return；”）；
gotInput=el的类型[“oninput”]=“函数”；
}
el=零；
//如果支持“输入”事件，则使用较小的
//一组事件
如果（输入）{
事件=[
“输入”，错误，
“文本输入”，错误
];
}
}
$.fn.userChange=函数（fn，数据）{
功能检查通知（e，延迟）{
var self=这个；
var this$=$（this）；
if（this.value！==此$.data（“priorValue”））{
此$.data（“priorValue”，此.value）；
fn.调用（此，e，数据）；
}否则，如果（延迟）{
//实际数据更改发生在某些事件之后
//所以我们把支票排在后面
//我们需要setTimeout（）的e的副本，因为实际的e
//可能在触发setTimeout（）之前被覆盖
var eCopy=$.extend（{}，e）；
setTimeout（函数（）{checkNotify.call（self，eCopy，false）}，1）；
}
}
//此jQuery对象中每个项的连接事件处理程序
//记住初始值
这个。每个（函数（）{
var this$=$（this.data）（“priorValue”，this.value）；
对于（变量i=0；i

您实际上并没有说您只是在尝试跟踪用户对输入元素的更改还是程序更改。对于新浏览器，您可以监视

input

事件，当用户控件更改了输入字段的值时，它会告诉您。除了挂接所有可能更改字段的代码以添加您自己的更改通知系统外，没有跨浏览器的方法来判断字段的值是否已通过编程方式更改

我不久前编写了这个跨浏览器函数，用于监视所有浏览器中用户对输入字段的各种形式的更改。这段代码恰好是jQuery方法的形式，但是可以很容易地将逻辑修改为纯javascript。此代码检查是否支持newish事件。如果是的话，它会使用它们。如果没有，它会钩住许多其他事件，试图捕获用户更改字段的所有可能方式（拖放、复制/粘贴、键入等）

（函数（$）{
var-isIE=false；
//条件编译，它告诉我们这是否是IE
/*@抄送
伊西=真；
@*/
//如果不支持“输入”事件，则要监视的事件
//布尔值是我们是否必须
//使用setTimeout（）在事件发生后重新检查
var事件=[
“keyup”，假的，
“模糊”，假，
“聚焦”，错误，
“滴”，没错，
“改变”，错，
“输入”，错误，
“文本输入”，错误，
“粘贴”，没错，
“切”，没错，
“复制”，没错，
“上下文菜单”，对
];
//测试th
(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);