Gestió d'esdeveniments¶
Esdeveniments del ratolí¶
Són aquells que reaccionen quan es fa alguna acció amb el punter o amb els botons del ratolí.
Tingueu en compte que...
Tot i que habitualment el botó principal és l'esquerre i el botó de menú contextual el dret, l'usuari els pot haver canviat a la seva configuració, per exemple si és esquerrà.
onclick¶
Detecta quan fem un clic amb el botó principal del ratolí sobre l'element que té l'esdeveniment associat.
document.getElementById( "element" ).onclick = function () {...}
La funció de retorn porta implícit un paràmetre que ens dóna informació de l'esdeveniment que s'ha produït.
Aquest paràmetre és opcional, i normalment s'anomena e per indicar que correspon a un esdeveniment (event), tot i que el nom és arbitrari.
Si el botó té un comportament per defecte associat, el podem cancel·lar invocant el mètode preventDefault d'aquest paràmetre.
document.getElementById( "element" ).onclick = function ( e )
{
e.preventDefault();
...
}
ondblclick¶
Detecta quan fem doble clic amb el botó principal del ratolí sobre l'element que té l'esdeveniment associat.
document.getElementById( "element" ).ondblclick = function () {...}
Igual que amb onclick, la funció de retorn porta implícit un paràmetre que ens dóna informació de l'esdeveniment que s'ha produït.
Tingueu en compte que...
En cas que un element tingui associats alhora els esdeveniments click i dblclick, en fer doble click es processaran tots dos, primer el click i després el dblclick.
oncontextmenu¶
Detecta quan fem clic amb el botó de menú contextual del ratolí sobre l'element que té l'esdeveniment associat.
document.getElementById( "element" ).oncontextmenu = function () {...}
La funció de retorn porta implícit un paràmetre que ens dóna informació de l'esdeveniment que s'ha produït.
Aquest paràmetre és opcional, i normalment s'anomena e per indicar que correspon a un esdeveniment (event), tot i que el nom és arbitrari.
Ens pot ser útil per evitar que es desplegui el menú contextual en fer clic amb el botó invocant el mètode preventDefault d'aquest paràmetre.
document.getElementById( "element" ).oncontextmenu = function ( e )
{
// Evitem que s'obri el menú contextual
e.preventDefault();
...
}
onmousedown | onmouseup¶
Detecten el moment en que es prem (mousedown) o es deixa anar (mouseup) qualsevol botó del ratolí sobre l'element que té l'esdeveniment corresponent associat.
La funció de retorn porta implícit un paràmetre que ens dóna informació de l'esdeveniment que s'ha produït.
Aquest paràmetre és opcional, i normalment s'anomena e per indicar que correspon a un esdeveniment (event), tot i que el nom és arbitrari.
Podem determinar amb quin botó s'ha fet clic llegint la propietat button de l'esdeveniment de retorn:
| valor | botó |
|---|---|
| 0 | botó principal |
| 1 | rodeta o botó central |
| 2 | botó de menú contextual |
Ordre dels esdeveniments en fer clic
Si fem doble clic sobre un element l'ordre en que es disparen els diferents esdeveniments és:
1. onmousedown
2. onmouseup
3. onclick
4. ondblclick
L'esdeveniment onclick només té lloc per un element si ha rebut just abans un onmousedown seguit d'un onmouseup.
document.getElementById( "element" ).onmousedown = function (e) {
this.innerHTML = "Has pressionat el botó " + e.button;
}
onmousemove¶
Detecta el moment en que s'està movent el punter del ratolí pel damunt de l'element que té l'esdeveniment associat.
Podem determinar les coordenades del punter llegint les següents propietats de l'esdeveniment de retorn:
| eix X | eix Y | posició |
|---|---|---|
| clientX | clientY | respecte a l'element |
| pageX | pageY | respecte a la pàgina |
| screenX | screenY | respecte a la pantalla (àrea visible) |
document.getElementById("element").onmousemove = function (e) {
this.innerHTML = "Coordenades: " + e.clientX + ", " + e.clientY;
}
onmouseover | onmouseout¶
Detecten el moment en que el punter de ratolí es situa sobre o surt de sobre l'element que té l'esdeveniment corresponent associat.
document.getElementById( "element" ).onmouseover = function () {...}
document.getElementById( "element" ).onmouseout = function () {...}
Els paràmetres target i relatedTarget ens donen informació d'on provenia el punter i a on ha anat a parar:
Per mouseover
event.target – És l'element al qual s'acosta el punter
event.relatedTarget – És l'element d'on prové el punter (passem de relatedTarget a target)
Per mouseout
event.target – És l'element que el punter ha abandonat
event.relatedTarget – És l'element que queda sota el punter un cop abandonat l'anterior (passem de target a relatedTarget).
document.getElementById(...).onmouseover = function (e) {
let elementActual = e.target
let elementAnterior = e.relatedTarget
}
document.getElementById(...).onmouseout = function (e) {
let elementAbandonat = e.target
let elementActual = e.relatedTarget
}