Мне бы очень хотелось, чтобы можно было наблюдать за изменениями в узле и запускать функции на основе этих изменений.
Я собираюсь определить «изменения» как:
- Атрибуты редактирования / добавления / удаления для узла и всех потомков.
- Редактирование / добавление / удаление текстовых узлов внутри узла и всех его потомков.
- События, связанные / не связанные с узлом и всеми потомками.
- Добавление / удаление потомка.
- CSS изменяется на узел и всех потомков.
- Удаление узла.
Теперь, может быть, я поступаю неправильно, но я подумал о том, чтобы проверить уже существующие методы jQuery, отвечающие за изменения, подобные перечисленным выше, и добавить некоторый код, который запускает событие на всех узлах. в наборе и их предки (имитирующие всплывающее событие).
Примерно так:
$.fn.attrMOD = $.fn.attr;
$.fn.attr = function() {
this.each(function(){
$.fn.trigger.call($(this).parents().add(this), 'modify', { changeType: 'attr', originalTarget: $(this) });
});
return $.fn.attrMOD.apply(this, arguments);
};
И я бы сделал это для многих методов (css, bind, unbind и т. Д.).
Таким образом, чтобы подписаться на это событие «изменить», вы должны сделать что-то вроде:
$('div').bind('modify', function() { console.log('Div was modified') })
//this would trigger it
$('div').attr('hello', 'world');
Итак пара вопросов:
- Я сумасшедший, чтобы попробовать это?
- Правильно ли я поступаю? Имейте в виду, что приведенный выше код не близок к окончательному, но это моя общая идея.
Спасибо за чтение!