Как в JS отловить изменения сделанные при помощи innerHTML?

Question

[Игорь Безлепкин]

Привет! Есть код:

var inputs = function () {
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener("blur", function (e) {
                });
            };
        };

Поля формы отлавливает. Но если поле добавлено через innerHTML то уже не ловит. Как можно отловить изменеие innerHTML?

Answer 1

[Николай Шабалин]

Делегирование событий

Answer 2

[Антон Швец]

Как можно отловить изменеие innerHTML?

<div id="div"></div>

const div = document.getElementById('div');
const mo = new MutationObserver(m => console.log(m));
mo.observe(div, { childList: true });

div.innerHTML = '<p>Привет</p>';

https://developer.mozilla.org/ru/docs/Web/API/Muta...

Comments

[Сергей delphinpro]

Мне показалось, автору нужно простое делегирование событий. MutationObserver все же не для обслуживания ивентов.

[Антон Швец]

Сергей delphinpro, я обычно не гадаю че там нужно автору, а отвечаю на вопрос, если он однозначный.

Answer 3

[lloydbanks]

Для этой цели отлично подходит Proxy

const div = document.createElement('div')
document.body.appendChild(div)

const divWatcher = new Proxy(div, {
	set(target, prop, value) {
		target[prop] = value
		console.log(prop, value)
		return true
	}
})

divWatcher.innerHTML = 'html' // innerHTML html

https://jsfiddle.net/lloydbanks/jgqokech/