ildar-k
7/25/2018 - 9:07 PM

Mouse events

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