Javascript：检查元素是否已更改

Question

我想知道，如果可能的话，如何在 javascript 中检查元素或其属性是否已更改？

我的意思是像 window.onhashchange 这样的元素：

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

据我所知 onchange 是这样的，但是如果我想以这种方式知道它会起作用吗：

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

element.attribute.onchange = function();

Answer 1

我这样做了。它运作得很好。如果我知道的话，我会使用 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);
                }
            }

        }

Answer 2

据我了解，您想要 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!');

现在您会收到一个警告框，其中显示“某些内容从未定义更改为 Hello World！”。并且 (element.something === 'Hello World!') 将返回 true。

如果您现在调用：

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

您会收到一个警报框，其中显示“Hello World 发生了一些变化！”再见世界！”。

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

编辑：

在将来的某个时候，您也许可以使用Object.observe()。

编辑2：

现在还有代理。

Answer 3

您可能会考虑突变观察者。

为此，您首先创建一个回调（当 dom 元素更改时触发）

将其分配给观察者 varobserver = new MutationObserver(callback);

然后告诉观察者要观看什么 observer.observe ('

',observerOptions);

来自：
Mozilla 突变观察器页面

Answer 4

我想您需要一种方法来捕获触发属性更改而不是属性更改的事件。属性的更改只能是由于 CSS 或 javascript 造成的，两者都是用户操作的表现。

Answer 5

我相信不存在这样的事件。但是，您可以使用 setInterval 或 setTimeout 来监视元素更改并使用它做出相应的反应。