Cacher is the code snippet organizer for pro developers

// Event Bubbling, kui ma vajutan laps-elementi, siis see mõjutab ka vanem-elementi, ja selle vanemaid, see omakorda selle vanemaid jne.
document.querySelector('li').addEventListener('click', function(){
    console.log('li clicked');
});

document.querySelector('ul').addEventListener('click', function(){
    console.log('ul clicked');
});

document.querySelector('#content').addEventListener('click', function(){
    console.log('#content clicked');
});
document.querySelector('body').addEventListener('click', function(){
    console.log('body clicked');
});



// Event delegation toimib siis, kui käsu andmine käib ülevalt alla. Ehk vanem-elemendile antavad käsklused, funktsioonid mõjutavad ka laps-elemente. Ntks eventlistener pannakse vanemelemendile ning luuakse tingimus, mis käivitab fn vaid siis kui on kaasatud õige sihtobjekt
const content = document.querySelector('#content');

//selekteerin kogu kaardi, mis registreerib hiireklikki ja käivitab fn deleteItem
content.addEventListener('click', deleteItem);


function deleteItem(e){
    // kui kliki sihtkohaks on element, mille vanemelemendil on atribuut href, siis kuva sihtkoha nimi
    if(e.target.parentElement.hasAttribute('href')){
        console.log(e.target);
    }
    e.target.parentElement.parentElement.remove(); // klikates targetile, milleks on tag i, eemalda vanem-elemendi vanem-element, milleks on li
}