Javascript: Проверьте, изменился ли элемент

Я хочу знать, если это возможно, как проверить в javascript, если элемент изменился или его атрибут?

Я имею в виду что-то вроде window.onhashchange для элемента что-то вроде:

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

Я знаю onchange - Это что-то вроде этого, но будет ли это работать, если я хочу знать таким образом:

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

element.attribute.onchange = function();
7
element javascript onchange

4 ответов

насколько я понимаю, вы хотите onChange на свойствах объекта javascript. Ответ-нет, насколько мне известно, его не существует.

но вы можете сделать функцию сеттера такой (как доказательство концепции):

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 метод в коде, если вы хотите запечатлеть это событие!

Edit:

в какой-то момент в будущем вы можете использовать

8

Я думаю, вам понадобится способ захватить событие, которое вызвало изменение атрибута, а не изменение атрибута. Изменение атрибута может быть вызвано только вашим CSS или javascript, оба являются проявлениями действий пользователя.

1

Я считаю, что нет такого события. Однако можно использовать setInterval или setTimeout для отслеживания изменений элементов и использовать его для соответствующей реакции.

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);
                }
            }

        }
0