¿Qué es un evento?
La interacción de JavaScript con HTML se maneja a través eventos que se producen cuando el usuario o el navegador manipula una página.
Cuando se carga la página, se llama un evento. Cuando el usuario hace clic en un botón, ese clic es también un evento. Otros ejemplos incluyen eventos como pulsar cualquier tecla, el cierre de una ventana, cambiar el tamaño de una ventana, etc.
Los desarrolladores pueden utilizar estos eventos para ejecutar JavaScript codificado respuestas, que causan botones para cerrar las ventanas, los mensajes que se mostrarán a los usuarios, los datos sean validados, y prácticamente cualquier otro tipo de respuesta imaginable.
Los eventos son una parte de la Document Object Model (DOM) Nivel 3 y cada elemento HTML contiene un conjunto de eventos que pueden desencadenar Código JavaScript.
Por favor, vaya a través de este pequeño tutorial para una mejor comprensiónReferencia HTML Evento. Aquí vamos a ver algunos ejemplos para entender una relación entre eventos y JavaScript -
onclick Tipo de evento
Este es el tipo de evento más frecuente que se produce cuando un usuario hace clic en el botón izquierdo de su ratón. Usted puede poner su validación, advertencia, etc., en contra de 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
onsubmit es un evento que ocurre cuando intenta enviar un formulario. Usted puede poner su validación de formularios en contra de este tipo de evento.
Ejemplo
El siguiente ejemplo muestra cómo utilizar onsubmit. Aquí hacemos un llamado avalidate () la función antes de enviar a los datos del formulario al servidor web. Sivalidate () función devuelve true, el formulario se presentará, de lo contrario no va a 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 le ayudará a crear efectos agradables con imágenes, o incluso con el texto también. El onmouseover evento se dispara cuando usted trae su ratón sobre cualquier elemento y el onmouseout desencadena cuando se mueve el puntero del ratón a partir 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
HTML 5 Eventos estándar
Los HTML 5 eventos estándar se enumeran aquí para su referencia. Aquí guión indica una función Javascript para ser ejecutado en contra de ese evento.
| Cualidad | Valor | Descripción |
|---|---|---|
| Desconectado | guión | Dispara cuando el documento se queda sin conexión |
| OnAbort | guión | Dispara en un evento de aborto |
| onafterprint | guión | Dispara después de que el documento se imprime |
| onbeforeonload | guión | Dispara antes de que las cargas de documentos |
| OnBeforePrint | guión | Dispara antes de imprimir el documento |
| onblur | guión | Dispara cuando la ventana pierde el foco |
| oncanplay | guión | Dispara cuando los medios pueden empezar a jugar, pero la fuerza tiene que parar por buffering |
| oncanplaythrough | guión | Dispara cuando los medios de comunicación pueden jugar hasta el final, sin parar de búfer |
| onchange | guión | Dispara cuando un elemento cambia |
| al hacer clic | guión | Dispara en un clic del ratón |
| OnContextMenu | guión | Dispara cuando se activa un menú contextual |
| ondblclick | guión | Dispara en un ratón haga doble clic |
| ondrag | guión | Dispara cuando se arrastra un elemento |
| ondragend | guión | Disparadores al final de una operación de arrastre |
| ondragenter | guión | Dispara cuando un elemento ha sido arrastrado a un destino de colocación válida |
| OnDragLeave | guión | Dispara cuando un elemento está siendo arrastrado en un destino de colocación válida |
| ondragover | guión | Disparadores en el inicio de una operación de arrastre |
| ondragstart | guión | Disparadores en el inicio de una operación de arrastre |
| ondrop | guión | Dispara cuando se cayó elemento arrastrado |
| ondurationchange | guión | Disparadores cuando se cambia la longitud de los medios de comunicación |
| onemptied | guión | Dispara cuando un elemento de recurso de medios de repente se vuelve vacía. |
| onended | guión | Se dispara cuando los medios de comunicación ha llegar al final |
| onerror | guión | Dispara cuando se produzca un error |
| onfocus | guión | Dispara cuando la ventana se pone el foco |
| onformchange | guión | Se dispara cuando un formulario cambios |
| onforminput | guión | Dispara cuando una forma se pone la entrada del usuario |
| onhaschange | guión | Dispara cuando el documento tiene el cambio |
| oninput | guión | Dispara cuando un elemento recibe la entrada del usuario |
| oninvalid | guión | Dispara cuando un elemento no es válido |
| onkeydown | guión | Dispara cuando se pulsa una tecla |
| onkeypress | guión | Dispara cuando se pulsa una tecla y puesto en libertad |
| onkeyup | guión | Dispara cuando se suelta una tecla |
| onload | guión | Se dispara cuando las cargas de documentos |
| onloadeddata | guión | Dispara cuando los datos medios se carga |
| onloadedmetadata | guión | Dispara cuando la duración y otros datos de los medios de un elemento material está cargado |
| onLoadStart | guión | Dispara cuando el navegador comienza a cargar los datos de los medios |
| onmessage | guión | Dispara cuando se activa el mensaje |
| onmousedown | guión | Dispara cuando se pulsa un botón del ratón |
| onmousemove | guión | Se dispara cuando el puntero del ratón se mueve |
| onmouseout | guión | Dispara cuando el puntero del ratón se mueve fuera de un elemento |
| onmouseover | guión | Dispara cuando el puntero del ratón se mueve sobre un elemento |
| onmouseup | guión | Dispara cuando se suelta el botón del ratón |
| onMouseWheel | guión | Dispara cuando se hace girar la rueda del ratón |
| onoffline | guión | Dispara cuando el documento se queda sin conexión |
| onoine | guión | Dispara cuando el documento se pone en línea |
| ononline | guión | Dispara cuando el documento se pone en línea |
| onpagehide | guión | Dispara cuando la ventana está oculta |
| onpageshow | guión | Dispara cuando la ventana se hace visible |
| onPause | guión | Dispara cuando se hace una pausa de datos multimedia |
| onplay | guión | Dispara cuando los datos medios de comunicación va a empezar a jugar |
| onplaying | guión | Dispara cuando los datos de medios de comunicación ha empezar a jugar |
| onpopstate | guión | Dispara cuando cambia la historia de la ventana |
| en progreso | guión | Dispara cuando el navegador es ir a buscar los datos de los medios de comunicación |
| onratechange | guión | Dispara cuando el tipo de juego de los datos de los medios ha cambiado |
| onreadystatechange | guión | Se dispara cuando los cambios de estado listo |
| onredo | guión | Dispara cuando el documento realiza una redo |
| onresize | guión | Dispara cuando se cambia el tamaño de la ventana |
| onscroll | guión | Dispara cuando se está desplazando la barra de desplazamiento de un elemento |
| onseeked | guión | Dispara cuando el atributo de búsqueda de un elemento de los medios de comunicación ya no es así, y la búsqueda ha terminado |
| onseeking | guión | Dispara cuando el atributo de búsqueda de un elemento de comunicación es verdad, y la búsqueda se ha iniciado |
| onselect | guión | Dispara cuando se selecciona un elemento |
| onstalled | guión | Dispara cuando hay un error en ir a buscar datos de los medios |
| onstorage | guión | Se activa cuando se carga el documento |
| onsubmit | guión | Dispara cuando se envía un formulario |
| onsuspend | guión | Dispara cuando el navegador ha sido ir a buscar los datos de los medios de comunicación, pero se detuvo antes de que el archivo entero de medios era descabellada |
| ontimeupdate | guión | Dispara cuando los medios cambia su posición de juego |
| OnUndo | guión | Dispara cuando un documento realiza una deshacer |
| onunload | guión | Dispara cuando el usuario abandona el documento |
| onvolumechange | guión | Dispara cuando los medios cambia el volumen, también cuando el volumen está ajustado en "mute" |
| onwaiting | guión | Dispara cuando los medios de comunicación ha dejado de jugar, pero se espera que reanude |
No hay comentarios:
Publicar un comentario