Los eventos de ES6 son la parte de cada elemento HTML que contiene un conjunto de eventos que pueden activar el código JavaScript. Un evento es una acción u ocurrencia reconocida por el software. Puede ser activado por el usuario o por el sistema. La mayoría de los eventos se usan en botones, hipervínculos, desplazamientos, carga de páginas, etc. Todo esto entra en acción (procesado) con la ayuda de los controladores de eventos.
Controlador de eventos: simplemente, cuando ocurre un evento mencionado, se maneja. Cuando se genera el evento, se maneja en forma de un conjunto de instrucciones (función()).
Los siguientes son algunos de los eventos HTML más utilizados:
onclick: este evento se activa al hacer clic en un botón con la ayuda de hacer clic con el botón izquierdo del mouse. Con un clic, el «onclick» llama a la función respectiva () asignada a él.
- Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
ES6 Events using onclick
</title>
<script>
function
geeks() {
document.write (
"A Computer"
+
" Science Portal for Geeks"
)
}
</script>
</head>
<body style=
"text-align:center;"
>
<h1 style=
"color:green;"
>
GeeksforGeeks
</h1>
<h3>
With a click, the “onclick”
calls geeks()
</h3>
<input type =
"button"
onclick =
"geeks()"
value =
"Click here"
/>
</body>
</html>
- Producción:
onmouseover y onmouseout: estos tipos de eventos nos ayudarán a crear buenos efectos con imágenes o incluso con texto. El evento «onmouseover» se activa cuando coloca el cursor del mouse sobre cualquier elemento y «onmouseout» se activa cuando mueve el cursor del mouse fuera de ese elemento.
- Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
ES6 Events using onmouseover
and onmouseout
</title>
<script type=
"text/javascript"
>
function
mouseOver() {
document.getElementById(
"d1"
).style.color
=
"green"
;
document.getElementById(
"d2"
).innerHTML
=
"mouseOver triggered"
;
}
function
mouseOut() {
document.getElementById(
"d1"
).style.color
=
"black"
;
document.getElementById(
"d2"
).innerHTML
=
"mouseOut triggered"
;
}
</script>
</head>
<body style=
"text-align:center;"
>
<h1 id=
"d1"
onmouseover=
"mouseOver()"
onmouseout=
"mouseOut()"
>
GeeksforGeeks
</h1>
<h3>
when the cursor is on the element
h1 the
"onmouseover"
gets triggers
and when the cursor is out of h1
the
"onmouseout"
gets triggers.
</h3>
<p id=
"d2"
></p>
</body>
</html>
- Producción:
onmousedown, onmouseup, onmousewheel : estos tipos de eventos nos ayudarán a crear buenos efectos con imágenes o incluso con texto. El evento «onmousedown» se activa cuando hace clic en el elemento y hasta que lo mantiene presionado cuando lo suelta.
- Ejemplo:
<!DOCTYPE hmtl>
<html>
<head>
<title>
ES6 Events using onmousedown,
onmouseup and onmousewheel
</title>
<script>
function
mouseDown() {
document.getElementById(
"d1"
).style.color
=
"blue"
;
document.getElementById(
"d2"
).innerHTML
=
"mouseDown triggered"
;
}
function
mouseUp() {
document.getElementById(
"d1"
).style.color
=
"green"
;
document.getElementById(
"d2"
).innerHTML
=
"mouseUp triggered"
;
}
function
mouseWheel() {
document.getElementById(
"d1"
).style.color
=
"violet"
;
document.getElementById(
"d2"
).innerHTML
=
"mouseWheel triggered"
;
}
</script>
</head>
<body style=
"text-align:center;"
>
<h1 style=
"color:green;"
>
GeeksforGeeks
</h1>
<p>
when the mouse pointer clicks on the element h1,
the text color changes to
'blue'
when released
changes to
'green'
,
if
the mouse wheel rotates color
changes to
'violet'
.
</p>
<input id=
"d1"
type=
"button"
onmousedown=
"mouseDown()"
onmouseup=
"mouseUp()"
onmousewheel=
"mouseWheel()"
value=
"Hello Geeks"
/>
<p id=
"d2"
></p>
</body>
</html>
onsubmit: es un evento que ocurre cuando intenta validar un formulario antes de enviarlo a la siguiente acción (servidor). Puede poner la validación de su formulario en este tipo de evento. Con un clic, “onsubmit” llama a la respectiva “función de retorno()” asignada y toma la respuesta de la función() en forma de verdadero o falso y decide la acción. Echa un vistazo a esta página ES6 | Validación de ejemplos básicos y detallados en «onsubmit» .
Consulte la siguiente tabla para ver algunos de los controladores de eventos más utilizados:
Atributo | Descripción |
---|---|
en el cambio | Se activa cuando cambia un elemento |
enfocado | Se dispara cuando la ventana se enfoca |
en la entrada | Se activa cuando un elemento recibe la entrada del usuario |
onformcambiar | Se activa cuando cambia un formulario |
al pulsar una tecla | Se activa cuando se presiona y suelta una tecla de palabra clave |
onkeydown | Se dispara cuando se presiona una tecla |
encendido | Se activa cuando se suelta una tecla |
onmovemove | Se activa cuando se mueve el puntero del mouse |
en pausa | Se activa cuando los datos multimedia están en pausa |
en desplazamiento | Se activa cuando se desplaza la barra de desplazamiento de un elemento |
en seleccionar | Se activa cuando se selecciona un elemento |
en espera | Se activa cuando el medio ha dejado de reproducirse, pero se espera que se reanude |
en pausa | Se activa cuando los datos multimedia están en pausa |
en juego | Se activa cuando los datos multimedia van a comenzar a reproducirse |
jugando | Se activa cuando los datos multimedia comienzan a reproducirse |