Q: Reverse Event Bubbling JavaScript I've got my function which changes height of a div when I hover on shop icon. I want to hold that effect when I hover also on the div I've just revealed, but e.target targets it's childrens. Is there a way to stop "looking" deeper when mouse is over that div? Of course I can add if statement but there will be so much code, and I think that way will be a lot better.
const shoppingIcon = document.querySelector('.cart-preview');
const hoverContent = document.querySelector('.cart-hover-content');

shoppingIcon.addEventListener('mouseover', showCart)

function showCart(e) {
    if (window.getComputedStyle(hoverContent).getPropertyValue('height') == '0px') {

        hoverContent.style.height = height + 'px';
    } else {
        hoverContent.style.height = 0;
    }
}

hoverContent.addEventListener('mouseover', (e) => {
    if (e.target === hoverContent) {
       hoverContent.style.height = height + 'px';
    }
},)


A: The target contains the element you pointed at, and the currentTarget contains the element you assigned the event handler to
Try: e.currentTarget

A: If anyone is interested i reorganaised this code with e.currentTarget, and now it works perfectly.
const shoppingIcon = document.querySelector('.cart-preview');
const hoverContent = document.querySelector('.cart-hover-content');
const height = hoverContent.clientHeight;

shoppingIcon.addEventListener('mouseenter', showCart)
hoverContent.addEventListener('mouseover', showCart)
hoverContent.addEventListener('mouseout', hideCart)

function showCart(e) {
    if (e.currentTarget === shoppingIcon || e.currentTarget === hoverContent) {

        hoverContent.style.height = height + 'px';
    }
}

function hideCart(e) {
    if (e.currentTarget !== shoppingIcon || e.currentTarget !== hoverContent) {

        hoverContent.style.height = 0;
    }
}

