This question has already been answered:

I have a block: <div class="dataBlock"></div> .

How to create an event that will always trigger when something changes inside this block (and we cannot add any callback to the script that directly changes the contents of the .dataBlock )?

You need to do something like .addEventListener("myEvent", ...) and, when something has changed, output some kind of alert() .

Is it possible?

Reported as a duplicate by Dmitriy Simushev , Akina , aleksandr barakin , Vadim Ovchinnikov , ermak0ff 2 Feb '17 at 20:04 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

    Under the link that the previous responder indicated, you can find an example of how to add an event for a DOM element :

     element.addEventListener("DOMNodeInserted", function (ev) { // ... }, false);

    A list of all mutailevent can also be found on the link above, or search them in the official documentation :

    • DOMAttrModified
    • DOMAttributeNameChanged
    • DOMCharacterDataModified
    • DOMElementNameChanged
    • DOMNodeInserted
    • DOMNodeInsertedIntoDocument
    • DOMNodeRemoved
    • DOMNodeRemovedFromDocument
    • DOMSubtreeModified

    It will also be useful to know which events (not) are supported by different browsers, this can be found here .

    • Mutation event already deprecated. - Dmitriy Simushev
    • @DmitriySimushev, and then use instead of the lister to change the DOM? - VostokSisters
    • @VostokSisters MutationObserver . Better in performance and less fussing with calculating changes in the DOM tree. - Dmitriy Simushev
    • @DmitriySimushev, already dug up on this topic and also came to MutationObserver, thanks) - VostokSisters
    • @VostokSisters, I think it makes sense to write a detailed answer about MutationObserver;) - Dmitriy Simushev