ES6 - Eventos
JavaScript está destinado a agregar interactividad a sus páginas. JavaScript hace esto usando un mecanismo que usa eventos.Events son parte del modelo de objetos de documento (DOM) Nivel 3 y cada elemento HTML 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 un usuario o el sistema. Algunos ejemplos comunes de eventos incluyen un usuario que hace clic en un botón, carga la página web, hace clic en un hipervínculo, etc. A continuación se muestran algunos de los eventos HTML habituales.
Controladores de eventos
Cuando ocurre un evento, la aplicación ejecuta un conjunto de tareas relacionadas. El bloque de código que logra este propósito se llamaeventhandler. Cada elemento HTML tiene un conjunto de eventos asociados. Podemos definir cómo se procesarán los eventos en JavaScript mediante el uso de controladores de eventos.
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
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello World")
}
</script>
</head>
<body>
<p> Click the following button and see result</p>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>La siguiente salida se muestra en la ejecución exitosa del código anterior.
onsubmitEvent Type
onsubmites un evento que ocurre cuando intenta enviar un formulario. Puede comparar la validación de su formulario con este tipo de evento.
El siguiente ejemplo muestra cómo utilizar onsubmit. Aquí llamamos a una función validate () antes de enviar los datos del formulario al servidor web. Si la función validate () devuelve verdadero, el formulario se enviará; de lo contrario, no enviará los datos.
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 onmouseout se activa cuando mueve el mouse fuera de ese elemento.
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>La siguiente salida se muestra en la ejecución exitosa del código anterior.
Eventos estándar HTML 5
Los eventos estándar de HTML 5 se enumeran en la siguiente tabla para su referencia. 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 el medio puede comenzar a reproducirse, pero es posible que deba 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 | Disparadores en 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 deja un destino de caída válido |
| ondragover | guión | Se activa cuando un elemento se arrastra sobre un destino de colocación válido |
| 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 |
| 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 han comenzado 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 medio ha dejado de reproducirse, pero se espera que se reanude |