Flashcards
Eventos de JavaScript: evento de ratón01
Cards in this deck (8)
- 1Click TIPO: mouseEvent DESCRIPCION se dispara cuando el usuario hace clic en el elemntoEjemplo:
boton.addEventListener("click", function){
alert(hiciste clic en el boton);
});
cuando el usuario haga clic en el elemento mande un mensaje donde diga que ha echo clic - 2dblclick Tipo: MouseEvent Descripción: Se dispara cuando se hace doble clic en el elemntoEjemplo:
elemnt.addEventListener("dblclick", function){
alert("has echo doble click en elemento");
});
se ejecuta cuando el usuario hace doble clic en el elemento se mostrara un mensaje que le diga que ha echo doble click - 3mouseover tipo: MOuseEvent descripción: Hace su accion cuando el puntero entra en el área de un elementoEjemplo:
area.addEventListener("mouseover", function() { area.style.backgroundColor="red";
});
cuando el usuario pasa el mouse sobre el elemento con la ID (area) esta cambiara a color rojo - 4mouseout tipo: MouseEvent si ejecuta cuando el puntero del ratón sale del área de un elementoEjemplo:
salir.addEventListener("mouseout", function(){
salir.style.backgroundColor="black";
});
este evento hace que cuando el mouse salga del elemnto con ID(salir), este se vuelva de fondo negro - 5mousedown tipo: MouseEvent descripción: Ocurre cuando se presiona el puntero del ratón sobre un elementoEjmeplo:
presionar.addEventListener("mousedown",function() {presionar.style.backgroundColor="white";
});
se aplica cuando el usuario presionar cualquier boton del raton sobre el elemento de ID(presionar) su fondo cambia de color - 6mouseup tipo: MouseEvent descripcion: Ocurre cuando se suelta un boton del raton sobre un elementoEjemplo:
elemento.add.EventListener("mouseup", function() {
elemnto.style.backgroundColor="White";
});
se aplica cuando el usuario suelta cualquier boton presionado sobre el elemento con ID(elemento) este vuelve a su fondo de color blanco - 7mousemove tipo: MouseEvent descripción: se dispara continuamente mientras el raton se mueve sobre un elemntoEjemplo:
mover.addEventListener("mousemove", function(event) {
const x = event.clientX;
const y= event.clientY;
console.log("coordenadas del raton: X=${x
}, Y=${Y})
});
se ejecuta que cada vez que se mueva el mouse dentro del elemento "mover" mostrará las coordenadas de X y Y. - 8Contextmenu tipo:MouseEvent descripción: ocurre cuando se hace clic derecho para abrir el menú contextualEjemplo:
Elemento.addEventListener("contextmenu", function(event) {
event.preventDefault();
alert("has echo clic derecho en este elemento");
});
ocurre cuando se haga clic derecho sobre "elemento", evitara el menú por defecto y mostrara una alterta con el mensaje dentro de esta.