JavaScript：检查元素是否已更改

Question

我想知道，如果有可能的话，如何在JavaScript中检查一个元素或它的属性是否发生了变化？

我的意思类似于 window.onhashchange，但是针对的是一个元素，例如：

document.getElementById("element").onElementChange = function();

据我所知，onchange是像这样的，但如果我想以这种方式了解，它是否有效：

我知道onchange是这样的，但如果我想以这种方式了解，它是否有效：

var element = {};
element.attribute = result;

element.attribute.onchange = function();

- Adam Halasz

---

请问您是想追踪对象属性的变化还是DOM元素属性的变化？谢谢。 - Philar

请问如何在元素更改时播放声音，例如聊天室中的操作？ - alexia

@Nyuszika7H 我不这么认为 :P 这是一个普遍的问题。 - Adam Halasz

Answer 1

据我所知，您希望在JavaScript对象属性上使用onChange。答案是否定的，这种功能不存在。

但是，您可以编写一个像这样的setter函数（作为概念验证）：

var element = {};

element.setProperty = function(property, value) {
  if (typeof(element.onChange) === 'function') {
    element.onChange(property, element[property], value);
  }

  element[property] = value;
};



element.onChange = function(property, oldValue, newValue) {
  alert(property + ' changed from ' + oldValue + ' to ' + newValue);
};

element.setProperty('something', 'Hello world!');

现在你会收到一个带有“something changed from undefined to Hello World!”的警告框。而(element.something === 'Hello World!')将返回true。

如果你现在调用：

element.setProperty('something', 'Goodbye world!');

当你使用“setProperty”方法来设置属性时，如果要捕获此事件，你将得到一个警报框，“something changed from Hello World! to Goodbye World!”。

当然，如果你想捕获此事件，你必须在所有代码中仅通过“setProperty”方法设置属性！

编辑：

将来你可能能够使用Object.observe()。

编辑2：

现在还有代理。

- Jan

---

我认为只有输入字段在其值更改后才会触发onChange事件……这段代码是否经过测试？如果是这样，它是否适用于所有浏览器？ - Zathrus Writer

据我所知，这个问题与DOM元素无关，而是关于JavaScript对象的。我在Chrome控制台中进行了测试。我相信它在其他浏览器上也可以工作。 - Jan

Object.observe()现已被弃用，不应再使用。 - Plagiatus

Answer 2

您可能考虑使用突变观察器。

要做到这一点，您首先需要创建一个回调函数（当DOM元素更改时触发）。

将其分配给观察者 var observer = new MutationObserver(callback); 然后告诉观察者要监视什么 observer.observe('<div></div>', observerOptions); 来自：Mozilla页面关于Mutation Observers的说明

- lucsan

---

这是最新和相关的答案 - 你可以添加一些简单的代码使其更加明显 https://jsfiddle.net/wg4ahtf6/ - Jacksonkr

Answer 3

我猜你需要一种捕获触发属性更改的事件的方法，而不是属性更改本身。属性更改只能由CSS或JavaScript引起，两者都是用户操作的表现形式。

- Philar

---

是的，你应该捕获更改属性的事件。目前没有“属性更改”的事件监听器。 - timdream

-1，这个问题与DOM无关，请参见：var element = {}; - Jan

@Jan，看起来我可能误解了它。但这引出了一个问题，这种情况是否真的需要使用事件模型？ - Philar

为什么不使用事件？JavaScript是处理事件的非常好的语言。 - Jan

没人说他必须一直使用它。事件系统是完全有效的使用案例。 - Jan

Answer 4

我相信没有这样的事件。但是，您可以使用setInterval或setTimeout来监视元素更改并根据需要做出反应。

- Zathrus Writer

Answer 5

我做了这个。它运行得相当不错。如果我知道的话，我本来会使用setProperty方法。

function searchArray(searchValue, theArray, ChangeValue){
    for (var i=0; i < theArray.length; i++) {
        if (theArray[i].id === searchValue) {
            theArray[i].changed = ChangeValue;
        }
    }
}

function getArrayIindex(elementid, theArray){
    for (var i=0; i < theArray.length; i++) {
        if (theArray[i].id === elementid) {
            return i;
        }
    }
}

function setInputEvents(hiddenObject) {

        var element;

        for (var i = 0; i < document.forms[0].length; i++) {
            element = document.forms[0].elements[i];

            //Check to see if the element is of type input
            if (element.type in { text: 1, password: 1, textarea: 1 }) {

                arrFieldList.push({
                    id: element.id,
                    changed:false,
                    index: i,                    
                });

                element.onfocus = function () {
                    if (!arrFieldList[getArrayIindex(this.id, arrFieldList)].changed) {
                        hiddenObject.value = this.value;
                        this.value = '';
                    }
                }

                element.onblur = function () {
                    if (this.value == '') {
                        this.value = hiddenObject.value;
                    }
                }

                element.onchange = function () {
                    searchArray(this.id, arrFieldList, true);
                }
            }

        }

- Welshboy