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