Как установить событие на будущий DOM элемент?

Question

[Alexey]

Друзья, необходимо определить появился ли iframe внутри div'a с определенным классом и назначить ему событие onload.

Проверяю вот таким образом:

const _interval = setInterval(() => {
            if(special_div.querySelector('iframe')) {
                checkIframeLoaded();
                clearInterval(_interval);
            }
        }, 100);

Подход этот не нравится, уверен что есть более лаконичный способ узнать появится ли элемент внутри другого элемента и назначить ему событие?

Comments

[ArturMavlidov]

А в каких случаях элемент появляется внутри другого элемента?

Answer 1

[Rsa97]

Для контроля изменений DOM используйте MutationObserver. В данном случае вам надо установить опцию childList для слежения за потомками div'а и, если добавление элементов происходит не непосредственно в div, а в его потомка, то ещё и опцию subtree.

Answer 2

[Алексей Дубровин]

"В нутри определенного diva"
Значит нужно вешать событие именно на этот div

div.addEventListener('click',(event)=>{console.log(event.target)});

Далее если этот "target" имеет класс такойто то

Comments

[Alexey]

Вы неправильно поняли.
Iframe появляется внутри div'a примерно после 5 секунд.
1) Мне нужно определить - появился ли этот блок
2) Был ли он загружен

[Алексей Дубровин]

Alexey, Типо вы вставляете в определенный div какой-то фрейм
Он загружается-> после того как загрузился какое-то действие
Вот статья которую нашел

Answer 3

[tyoma_koder]

можно так
https://developer.mozilla.org/ru/docs/Web/API/Muta...