Eventos del mouse JavaScript
Según lo sugerido por el nombre, los eventos del mouse JavaScript se desencadenan por la interacción del mouse con las páginas web y estos eventos son parte del objeto MouseEvent.
Los eventos de JavaScript Mouse son
Este artículo discute estos uno por uno en profundidad.
Evento OnClick
Cuando un usuario hace clic en un elemento, el evento OnClick ocurre. Burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento OnClick se proporciona a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onClick = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("hacer clic", script);Ejemplo
Haga clic en el botón de abajo.
En el ejemplo anterior, aparecerá un botón en la página web. Después de hacer clic en el botón, el evento OnClick sucederá y aparecerá un mensaje.
Producción
Antes de hacer clic en el botón.
Después de hacer clic en el botón, aparecerá el mensaje.
evento OnContextMenu
Cuando se abre el menú contextual de un elemento utilizando el clic derecho, el evento OnContextMenu ocurre. Burbujea y también es cancelable. Este evento admite todas las etiquetas HTML y se incluye en DOM versión 3.
Sintaxis
La sintaxis del evento OnContextMenu se da a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onContextMenu = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("contextMenu", script);Ejemplo
Haga clic con el botón derecho sobre mi.
En el ejemplo anterior, cuando haga clic derecho en el texto, el evento OnContextMenu se activará y primero aparecerá un cuadro de dialoag diciendo que acaba de realizar un clic derecho y después de hacer clic en Aceptar en el cuadro de diálogo Se abrirá el menú contextual.
Producción
Cuando ejecute el ejemplo anterior, aparecerá el siguiente texto.
Ahora, cuando haga clic con el botón derecho en el texto, aparecerá el cuadro de diálogo.
Después de hacer clic en Aceptar, el menú contextual se abrirá.
Evento de OndblClick
Cuando un elemento se hace doble clic, el evento OndblClick ocurre. Burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento OndblClick se proporciona a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onDblClick = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("dblClick", script);Ejemplo
En el ejemplo anterior, aparecerá un botón y cuando haga doble clic en el botón El evento OndblClick se dispara y aparecerá un mensaje. Aquí está la salida.
Producción
Antes de hacer doble clic en el botón.
Después de hacer doble clic en el botón.
Evento de Onmousedown
Cuando presiona un botón del mouse mientras mantiene el mouse sobre un elemento HTML, ocurre el evento de Onmousedown. Burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento de onmousedown es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onMouseDown = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("Mousedown", script);Ejemplo
En el ejemplo anterior, aparecerá un botón en la página web. Cuando haga clic derecho en el botón mientras mantiene el puntero del mouse en el botón, el evento Onmousedown activará y el texto en el botón cambiará su color de negro a rojo.
Producción
El botón antes de hacer clic.
Después de hacer clic derecho en el mouse mientras el cursor permanece en el botón.
Evento en Mouseenter
Cuando traes un puntero de mouse en un elemento HTML, el evento On Mouseenter ocurre.No puede burbujear y no se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento OnMouseEnder es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onMouseEnter = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("mouseenter", script);Ejemplo
En el ejemplo anterior, aparece un texto en la página web. Cuando traiga el cursor de su mouse sobre el texto, el evento OnmouseEnter se activará y el color cambiará a Red.
Producción
Antes de traer el puntero del mouse en el texto.
Después de traer el cursor del mouse sobre el texto.
Evento de onmouseleave
Cuando aleja el puntero de su mouse de un elemento, el evento OnmousEleave ocurre. No puede burbujear y no se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento onmouseleave es la siguiente.
Sintaxis html
Sintaxis de JavaScript
objeto.onmouseLeave = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("MouseLeave", script);Ejemplo
En el ejemplo anterior, aparece un texto en la página web. Cuando mueve el cursor del mouse lejos del texto, el evento OnMouseEnter se activará y el color cambiará a verde.
Producción
Antes de alejar el puntero del mouse del texto.
El color cambiará cuando el puntero del mouse se aleje.
Evento de OnmouseMove
Cuando mueve el cursor de su mouse mientras lo mantiene en un elemento, el evento OnmouseMove ocurre. La única diferencia entre este evento y el evento en Mouseenter es que burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis de Onmousemove se da a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onmouseMove = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("mouseMove", script);Ejemplo
En el ejemplo anterior, cuando mueva el cursor del mouse sobre el texto, el evento de OnmouseMove ocurrirá y aparecerá un cuadro de diálogo informarle que el evento OnmouseMove se ha activado.
Producción
Antes de mover el mouse sobre el texto.
Después.
Evento de OnMouseut
Cuando un cursor del mouse deja un elemento o cualquiera de sus hijos, el evento de Onmouseut ocurre. La única diferencia entre esto y el ondumeleave es que burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento OnMouseOut se da a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onMouseOut = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("mouseOut", script);Ejemplo
En el ejemplo anterior, mueve el cursor del mouse lejos del botón, el evento On MouseOut se activará y el color del texto en el botón cambiará a verde.
Producción
Antes
Después
Evento de OnMouseOver
Cuando trae su cursor del mouse en un elemento o cualquiera de sus hijos, el evento de On Mouseover ocurre. Burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento en Mouseover se proporciona a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onMouseOver = function () script;JavaScript addEventListener () sintaxis
objeto.addEventListener ("Mouseover", script);Ejemplo
En el ejemplo anterior, mueve el cursor del mouse en el botón, el evento en Mouseover se activará y el color del texto en el botón cambiará a rojo.
Producción
Antes
Después
Evento de OnMouseup
Cuando se libera un botón del mouse mientras mantiene el puntero en un elemento, el evento de Onmouseup ocurre. Burbujea y se puede cancelar. Este evento admite todas las etiquetas HTML que no sean , ,
, , ,
Sintaxis
La sintaxis del evento OnMouseUp se proporciona a continuación.
Sintaxis html
Sintaxis de JavaScript
objeto.onMouseUp = function () script;Ejemplo
En el ejemplo anterior, aparecerá un botón. Cuando haga clic derecho en el botón y se suelte mientras mantiene el puntero del mouse en el botón, el evento hacia arriba del mouse se activará y el color del texto en el botón cambiará a verde.
Producción
Antes de hacer clic derecho en el botón.
Después de soltar el botón mientras mantén el puntero del mouse en él.
Conclusión
Los eventos que ocurren debido a los movimientos del mouse se denominan eventos de mouse JavaScript. Los eventos que se clasifican en la categoría de eventos de Mouse JavaScript son el evento OnClick, el evento OnContextMenu, el evento OnDBlClick, el evento OnMousedown, el evento On MouseEnter, el evento OnMouseLeave, el evento OnMousEmove, el evento OnMouseOut, el evento OnMouseOver y OnMouseUp. Todos estos eventos se discuten en detalle junto con el ejemplo apropiado.
Sobre el Autor
Soy un profesional de ingeniería de software con un profundo interés en la escritura. Estoy cursando la escritura técnica como mi carrera a tiempo completo y compartiendo mi conocimiento a través de mis palabras.
Ver todas las publicacionesLinux Sintin LLC, editor@Linuxhint.comunicarse
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Política de privacidad y condiciones de uso