how to trigger x, y, width, height changed in Javascript without jQuery

Question

I have this code written with jQuery and it's working perfectly

        // dedect position on load, resize, change
        jQuery.fn.onPositionChanged = function(trigger, millis) {
            if (millis == null) millis = 10;
            let o = $(this[0]); // our jquery object
            if (o.length < 1) return o;
            let lastPos = null;
            let lastOff = null;            
            setInterval(function() {
                if (o == null || o.length < 1) return o; // abort if element is non existend eny more
                if (lastPos == null) lastPos = o.position();
                if (lastOff == null) lastOff = o.offset();
                let newPos = o.position();
                let newOff = o.offset();                
                if (lastPos.top != newPos.top || lastPos.left != newPos.left) {
                    $(this).trigger('onPositionChanged', {
                        lastPos: lastPos,
                        newPos: newPos
                    });
                    if (typeof(trigger) == "function") trigger(lastPos, newPos);
                    lastPos = o.position();
                }
                if (lastOff.top != newOff.top || lastOff.left != newOff.left) {
                    $(this).trigger('onOffsetChanged', {
                        lastOff: lastOff,
                        newOff: newOff
                    });
                    if (typeof(trigger) == "function") trigger(lastOff, newOff);
                    lastOff = o.offset();
                }
            }, millis);
            return o;
        };
        
        // need to change #pos wih the elemnts from the array
        function onChangeElem() {
            for(let i of selectors){
                $(i).onPositionChanged(function(i){
                   move_mark(dots)
                })
            }
        }

but then we remove jQuery and changed the whole code, so instead of using offset().left and offset().top we used getBoundingClientRect()

the thing now is am trying to trigger on change for x, y, w, h using only Javascript.

I google a lot but couldn't find anything that helps.

I write this one which is checking only, but not trigger changes

function onChangeElem() {
    for(let i of selectors){     
        let s = document.querySelector(i);
        let r = s.getBoundingClientRect(); 
        let offY = window.pageYOffset-5;
        let offX = window.pageXOffset-5;
        let x, y, w, h;
        setInterval(function() {
            if ( r.x != x || r.y != y || r.width != w || r.height != h) {
                x = r.left + window.pageXOffset - 5,
                y = r.top + window.pageYOffset - 5,               
                w = r.width,
                h = r.height
                //move_mark(dots, x, y, w, h);
            }
        }, 100);
        return s;
    }
}

Thank you all in advanced