JavaScript - Eventos
¿Qué es un evento?
La interacción de JavaScript con HTML se maneja a través de eventos que ocurren cuando el usuario o el navegador manipula una página.
Cuando se carga la página, se denomina evento. Cuando el usuario hace clic en un botón, ese clic también es un evento. Otros ejemplos incluyen eventos como presionar cualquier tecla, cerrar una ventana, cambiar el tamaño de una ventana, etc.
Los desarrolladores pueden usar estos eventos para ejecutar respuestas codificadas en JavaScript, que hacen que los botones cierren ventanas, que se muestren mensajes a los usuarios, que se validen datos y prácticamente cualquier otro tipo de respuesta imaginable.
Los eventos son parte del Nivel 3 del Modelo de Objetos de Documento (DOM) y cada elemento HTML contiene un conjunto de eventos que pueden activar el Código JavaScript.
Consulte este pequeño tutorial para comprender mejor la Referencia de eventos HTML . Aquí veremos algunos ejemplos para comprender la relación entre Event y JavaScript:
Tipo de evento al hacer clic
Este es el tipo de evento más utilizado que ocurre cuando un usuario hace clic con el botón izquierdo de su mouse. Puede poner su validación, advertencia, etc., contra este tipo de evento.
Ejemplo
Pruebe el siguiente ejemplo.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>Salida
Tipo de evento onsubmit
onsubmites un evento que ocurre cuando intenta enviar un formulario. Puede comparar la validación de su formulario con este tipo de evento.
Ejemplo
El siguiente ejemplo muestra cómo usar onsubmit. Aquí estamos llamando avalidate()función antes de enviar los datos del formulario al servidor web. Sivalidate() La función devuelve verdadero, se enviará el formulario; de lo contrario, no enviará los datos.
Pruebe el siguiente ejemplo.
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>onmouseover y onmouseout
Estos dos tipos de eventos te ayudarán a crear efectos agradables con imágenes o incluso con texto. losonmouseover El evento se activa cuando coloca el mouse sobre cualquier elemento y el onmouseoutse activa cuando mueve el mouse fuera de ese elemento. Pruebe el siguiente ejemplo.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>Salida
Eventos estándar HTML 5
Los eventos estándar de HTML 5 se enumeran aquí para su referencia. Aquí el script indica una función de Javascript que se ejecutará contra ese evento.
| Atributo | Valor | Descripción |
|---|---|---|
| Desconectado | guión | Se activa cuando el documento se desconecta |
| Onabort | guión | Desencadenantes de un evento de aborto |
| onafterprint | guión | Se activa después de que se imprime el documento |
| onbeforeonload | guión | Se activa antes de que se cargue el documento |
| onbeforeprint | guión | Se activa antes de que se imprima el documento |
| en la falta de definición | guión | Se activa cuando la ventana pierde el foco |
| oncanplay | guión | Se activa cuando los medios pueden comenzar a reproducirse, pero es posible que tenga que detenerse para almacenar en búfer |
| oncanplaythrough | guión | Se activa cuando los medios se pueden reproducir hasta el final, sin detenerse para almacenar en búfer |
| onchange | guión | Se activa cuando un elemento cambia |
| al hacer clic | guión | Se dispara con un clic del mouse |
| oncontextmenu | guión | Se activa cuando se activa un menú contextual |
| ondblclick | guión | Se dispara con un doble clic del mouse |
| ondrag | guión | Se activa cuando se arrastra un elemento |
| ondragend | guión | Disparadores al final de una operación de arrastre |
| ondragenter | guión | Se activa cuando un elemento se ha arrastrado a un destino de colocación válido |
| ondragleave | guión | Se activa cuando un elemento se arrastra sobre un destino de colocación válido |
| ondragover | guión | Desencadenantes al inicio de una operación de arrastre |
| ondragstart | guión | Desencadenantes al inicio de una operación de arrastre |
| ondrop | guión | Se activa cuando se suelta el elemento arrastrado |
| ondurationchange | guión | Se activa cuando se cambia la longitud del medio |
| uno vacio | guión | Se activa cuando un elemento de recurso multimedia se vacía de repente. |
| terminado | guión | Se activa cuando los medios han llegado al final |
| onerror | guión | Se activa cuando ocurre un error |
| enfocado | guión | Se activa cuando la ventana se enfoca |
| onformchange | guión | Se activa cuando cambia un formulario |
| onforminput | guión | Se activa cuando un formulario recibe la entrada del usuario |
| onhaschange | guión | Se activa cuando el documento ha cambiado |
| en entrada | guión | Se activa cuando un elemento recibe la entrada del usuario |
| no válido | guión | Se activa cuando un elemento no es válido |
| onkeydown | guión | Se activa cuando se presiona una tecla |
| onkeypress | guión | Se activa cuando se presiona y suelta una tecla |
| onkeyup | guión | Se activa cuando se suelta una tecla |
| onload | guión | Se activa cuando se carga el documento |
| onloadeddata | guión | Se activa cuando se cargan datos de medios |
| onloadedmetadata | guión | Se activa cuando se carga la duración y otros datos multimedia de un elemento multimedia |
| onloadstart | guión | Se activa cuando el navegador comienza a cargar los datos multimedia. |
| onmensaje | guión | Se activa cuando se activa el mensaje |
| onmousedown | guión | Se activa cuando se presiona un botón del mouse |
| onmousemove | guión | Se activa cuando se mueve el puntero del mouse |
| onmouseout | guión | Se activa cuando el puntero del mouse se mueve fuera de un elemento |
| el ratón por encima | guión | Se activa cuando el puntero del mouse se mueve sobre un elemento |
| onmouseup | guión | Se activa cuando se suelta un botón del mouse |
| onmousewheel | guión | Se activa cuando se gira la rueda del mouse |
| en línea | guión | Se activa cuando el documento se desconecta |
| onoine | guión | Se activa cuando el documento entra en línea |
| en línea | guión | Se activa cuando el documento entra en línea |
| onpagehide | guión | Se activa cuando la ventana está oculta |
| onpagehow | guión | Se activa cuando la ventana se vuelve visible |
| en pausa | guión | Se activa cuando los datos multimedia están en pausa |
| onplay | guión | Se activa cuando los datos multimedia van a comenzar a reproducirse |
| jugando | guión | Se activa cuando los datos multimedia comienzan a reproducirse |
| onpopstate | guión | Se activa cuando cambia el historial de la ventana |
| en progreso | guión | Se activa cuando el navegador está recuperando los datos multimedia. |
| onratechange | guión | Se activa cuando la velocidad de reproducción de los datos multimedia ha cambiado |
| onreadystatechange | guión | Se activa cuando cambia el estado listo |
| onredo | guión | Se activa cuando el documento realiza un rehacer |
| onresize | guión | Se activa cuando se cambia el tamaño de la ventana |
| onscroll | guión | Se activa cuando se desplaza la barra de desplazamiento de un elemento |
| buscado | guión | Se activa cuando el atributo de búsqueda de un elemento de los medios ya no es verdadero y la búsqueda ha finalizado |
| en busca | guión | Se activa cuando el atributo de búsqueda de un elemento de los medios es verdadero y la búsqueda ha comenzado |
| onselect | guión | Se activa cuando se selecciona un elemento |
| instalado | guión | Se activa cuando hay un error al obtener datos multimedia. |
| almacenamiento | guión | Se activa cuando se carga un documento |
| onsubmit | guión | Se activa cuando se envía un formulario |
| suspender | guión | Se activa cuando el navegador ha estado obteniendo datos multimedia, pero se detuvo antes de que se obtuviera todo el archivo multimedia |
| ontimeupdate | guión | Se activa cuando el medio cambia su posición de reproducción |
| onundo | guión | Se activa cuando un documento realiza un deshacer |
| descargar | guión | Se activa cuando el usuario abandona el documento. |
| onvolumechange | guión | Se activa cuando los medios cambian el volumen, también cuando el volumen está configurado en "silencio" |
| en espera | guión | Se activa cuando el contenido multimedia ha dejado de reproducirse, pero se espera que se reanude |