Evenimente Mouse
Unul dintre cele mai frecvent utilizate tipuri de evenimente sunt evenimentele mouse-ului:
- click: apare la apăsarea cu cursorul mouse-ului pe un element
- dblclick: apare la dubla apăsare cu cursorul mouse-ului pe un element
- contextmenu: apare la deschiderea meniului contextual (cu butonul drept al mouse-ului)
- mousedown: apare când cursorul mouse-ului este pe un element și butonul mouse-ului este apăsat
- mouseup: apare când cursorul mouse-ului este pe un element și butonul mouse-ului este eliberat
- mousemove: apare când cursorul mouse-ului trece peste un element
- mouseover: apare când cursorul mouse-ului intră în limitele unui element
- mouseout: apare când cursorul mouse-ului iese din limitele unui element
- mouseenter: apare când cursorul mouse-ului intră în limitele unui element
- mouseleave: apare când cursorul mouse-ului iese din limitele unui element
Este important să menționăm diferența dintre ultimele patru evenimente. mouseenter și mouseleave se activează doar atunci când se traversează marginea exterioară a elementului corespunzător.
În timp ce evenimentele mouseover și mouseout se activează, de asemenea, când un alt element este în interiorul elementului corespunzător și cursorul mouse-ului se mișcă în elementul interior (adică părăsește elementul exterior) sau părăsește elementul interior (adică se mută pe elementul exterior).
De exemplu, să procesăm evenimentele mouseover și mouseout:
<!DOCTYPE html
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function setColor(e){
if(e.type==="mouseover")
e.target.style.backgroundColor = "red";
else if(e.type==="mouseout")
e.target.style.backgroundColor = "blue";
}
const blueRect = document.getElementById("blueRect");
blueRect.addEventListener("mouseover", setColor);
blueRect.addEventListener("mouseout", setColor);
</script>
</body>
</html>Acum, când cursorul mouse-ului este direcționat spre blocul blueRect, acesta se va colora în roșu, iar când cursorul mouse-ului părăsește blocul, va reveni la culoarea albastră.
Obiectul MouseEvent
Obiectul Event este comun pentru toate evenimentele. Cu toate acestea, pentru diferite tipuri de evenimente există, de asemenea, propriile obiecte de evenimente, care adaugă o serie de proprietăți ale lor. Astfel, pentru lucrul cu evenimentele mouse-ului este definit obiectul MouseEvent, care adaugă următoarele proprietăți:
- altKey: returnează true, dacă a fost apăsată tasta Alt în timpul generării evenimentului
- button: conține numărul butonului mouse-ului apăsat
- buttons: conține un număr care reprezintă butonul mouse-ului apăsat
1 reprezintă butonul stâng al mouse-ului, 2 - butonul drept al mouse-ului, 4 - roata mouse-ului sau butonul mijlociu al mouse-ului, 8 - al patrulea buton al mouse-ului, iar 16 - al cincilea buton al mouse-ului.
Dacă la declanșarea evenimentului au fost apăsate mai multe butoane, această proprietate conține suma numerelor corespunzătoare.
- clientX: determină coordonata X a ferestrei browserului, unde se afla cursorul mouse-ului în timpul generării evenimentului
- clientY: determină coordonata Y a ferestrei browserului, unde se afla cursorul mouse-ului în timpul generării evenimentului
- ctrlKey: returnează true, dacă a fost apăsată tasta Ctrl în timpul generării evenimentului
- movementX: conține coordonata X relativă la coordonata X anterioară la ultimul eveniment de mișcare a mouse-ului
- movementY: conține coordonata Y relativă la coordonata Y anterioară la ultimul eveniment de mișcare a mouse-ului
- metaKey: returnează true, dacă a fost apăsată o metatastă a tastaturii în timpul generării evenimentului
- region: conține identificatorul regiunii sau elementului care se referă la eveniment
- relatedTarget: determină sursa secundară a apariției evenimentului
- screenX: determină coordonata X relativă la colțul superior stâng al ecranului monitorului, unde se afla cursorul mouse-ului în timpul generării evenimentului
- screenY: determină coordonata Y relativă la colțul superior stâng al ecranului monitorului, unde se afla cursorul mouse-ului în timpul generării evenimentului
- shiftKey: returnează true, dacă a fost apăsată tasta Shift în timpul generării evenimentului
Să determinăm coordonatele clicului:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function handleClick(e){
console.log("screenX: " + e.screenX);
console.log("screenY: " + e.screenY);
console.log("clientX: " + e.clientX);
console.log("clientY: " + e.clientY);
}
const blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", handleClick);
</script>
</body>
</html>