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

Question

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

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

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

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

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

element.attribute.onchange = function();

Answer 1

Насколько я понимаю, вы хотите 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:

В будущем вы сможете использовать Object.observe () .

Редактировать 2:

Теперь есть также прокси .

Answer 2

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

Answer 3

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

Answer 4

Вы могли бы рассмотреть наблюдателя мутации.

для этого вы сначала создаете обратный вызов (срабатывает при изменении элемента dom)

назначить наблюдателю var observer = new MutationObserver(callback);

Тогда скажите наблюдателю, что смотреть observer.observe('<div></div>', observerOptions);

От: Страница Mozilla для наблюдателей мутаций

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

        }