const deleteBtn = document.querySelector('#DeleteBtn');
const contentBox = document.querySelector('#content');
// Mouse events:
deleteBtn.addEventListener('click', runEvent); //sündmuseks on tavaline 1x hiireklikk
deleteBtn.addEventListener('dblclick', runEvent); //sündmuseks 2x hiireklikk
deleteBtn.addEventListener('mousedown', runEvent); //sündmuseks kui vasakut hiireklahvi hoitakse all
deleteBtn.addEventListener('mouseup', runEvent); //sündmuseks kui vasak hiireklahv lastakse lahti
contentBox.addEventListener('mouseenter', runEvent); // kui kursor liigub elemendi kohale
contentBox.addEventListener('mouseleave', runEvent); // kui kursor liigub elemendi kohalt ära
//mouseover/out erinevus enter/leave'st seisneb selles, et see reageerib ka sellele, kui kursor liigub laps-elementide peale. ntks kui kursor liigub vanemelemendile käivitub mouseover, kui see liigub laps-elemendile, käivitub mouseout ja mouseover, kuna kursor liikus vanema pealt lapse peale
contentBox.addEventListener('mouseover', runEvent); // kui kursor liigub elemendi kohale
contentBox.addEventListener('mouseout', runEvent); // kui kursor liigub elemendi kohalt ära.
contentBox.addEventListener('mousemove', runEvent); // registreerib kursori koordinaadid