dimanche 3 octobre 2021

JavaScript MutationObserver. Observing a child element after observing a parent element triggers no events

Given this sample code:

    function someMethod(elements) {
        
        var observer = new MutationObserver(function(events) {
            
            SomeLib.each(events, function(event, k, i) {
                if ( event.removedNodes ) {
                    SomeLib.each(event.removedNodes, function(removedElement, k, i) {
                        console.log(222, removedElement)                       
                    });
                }
            });
        });
        
        SomeLib.each(elements, function(element, k, i) {
            console.log(111, element)
            
            observer.observe(element, {
                childList    : true,
                subtree      : false
            });
        });
    }

I've noticed that if I call someMethod(parentElement) and then call it again later someMethod(parentElement.querySelector('someChildElement'))

The first one is the only one that triggers events.

It appears as if the second call does not trigger any events.

This is unfortunate. I am mostly interested in an event when the actual node is removed. Nothing else.

No child nodes are really of interest however, either childList or data... has to be true so I am forced to I guess.

I can not organize my code around keeping track of who's a parent is already tracked or not, and therefore I would have found it much easier to simply listen to remove events on any particular node, whatever way it is eventually deleted.

Considering this dilemma, I am considering registering a MutationObserver on the body element and instead rely on detecting the element I wish to observe myself through my own event listener.

Is this really my best option? Performance is obviously of concern, and I would find one MutationObserver to be potentially efficient since I will only be triggering my own function when I detect the element of interest.

However, this begs the question, is there not already a global mutation observer registered? Do I really have to manually observe the body myself? What if other libraries also start to observe things, either body or child elements? Won't I destroy their implementation? (not that I have one) but this is worrying how horrible this implementation really seems to be, but not surprising considering how everything has been horrible with the web since the dawn of day. nothing is ever correctly implemented. thank you w3c.

Is MutationObserver really the way here? Perhaps there are node.addEventListener('someDeleteEvent') I can listen to instead?

Why are we being recommended away from DOMNodeRemoved like events, especially since performance penalty seems real using MutationObserver why are we recommended away from DOMNodeRemoved? I am also considering one on document level. Please see

What is the idea of deprecating those anyway since this seems useless.




Aucun commentaire:

Enregistrer un commentaire