const parent = document.querySelector(".parent");
const child = document.querySelector(".child");

// grandparent.addEventListener("click", e => {
//     console.log("Grandparent capture")
// }, { capture: true })  // it gives the hierarchy

grandparent.addEventListener("click", e => {
    console.log("Grandparent bubble")
}, { once: true })  // will run the code once 
// parent.addEventListener("click", e => {
//     e.stopPropagation() // none of the bubbles or capture occur 
//     console.log("Parent capture")
// }, { capture: true })
parent.addEventListener("click", sayhi)
setTimeout(() => {  // removes the event at a given time
    parent.removeEventListener("click", sayhi)
}, 2000)

// child.addEventListener("click", e => {
//     console.log("Child capture")
// }, { capture: true })
child.addEventListener("click", e => {
    console.log("Child bubble")
})
function sayhi() {   // creat a separate function
    console.log('Hi!')
}



const divs = document.querySelectorAll('div');
divs.forEach(div => {
    div.addEventListener('click', () => {
        console.log("inamo")
    })
})

addGlobalEventListener('click', 'div', e => {
    console.log('gago')
})
function addGlobalEventListener(type, selector, callback) {
    document.addEventListener(type, e => {
        if (e.target.matches(selector)) callback(e)
    })
}

const newDiv = document.createElement("div")
newDiv.style.width = '100px';
newDiv.style.height = '100px';
newDiv.style.backgroundColor = 'orange';
// newDiv.addEventListener('click', () => {
//     console.log('inamo')
// })
document.body.append(newDiv);