HTML DOM permite ejecutar código en respuesta a un evento:
<html><body>
<h1 id="mensaje">Bienvenido a DOM</h1>
<button onclick="document.getElementById('mensaje').style.color = 'red' "> Pulsa aquí</button>
</body></html>
Los eventos HTML son "cosas" que les suceden a los elementos HTML.
Cuando se usa JavaScript en páginas HTML, JavaScript puede "reaccionar" a estos eventos. Por ejemplo en un elemento botón al hacer click se ejecuta la función alert(Date()).
La forma general es : <elementoHTML evento= " código javascript ">.
Ejemplo:
<button onclick = "alert(Date())"> Ver Fecha </button>
| Evento | Descripción | Elementos para los que está definido |
|---|---|---|
onblur |
Un elemento pierde el foco | <button>, <input>, <label>, <select>, <textarea>, <body> |
onchange |
Un elemento ha sido modificado | <input>, <select>, <textarea> |
onclick |
Pulsar y soltar el ratón | Todos los elementos |
ondblclick |
Pulsar dos veces seguidas con el ratón | Todos los elementos |
onfocus |
Un elemento obtiene el foco | <button>, <input>, <label>, <select>, <textarea>, <body> |
onkeydown |
Pulsar una tecla y no soltarla | Elementos de formulario y <body> |
onkeypress |
Pulsar una tecla | Elementos de formulario y <body> |
onkeyup |
Soltar una tecla pulsada | Elementos de formulario y <body> |
onload |
Página cargada completamente | <body> |
onmousedown |
Pulsar un botón del ratón y no soltarlo | Todos los elementos |
onmousemove |
Mover el ratón | Todos los elementos |
onmouseout |
El ratón "sale" del elemento | Todos los elementos |
onmouseover |
El ratón "entra" en el elemento | Todos los elementos |
onmouseup |
Soltar el botón del ratón | Todos los elementos |
onreset |
Inicializar el formulario | <form> |
onresize |
Modificar el tamaño de la ventana | <body> |
onselect |
Seleccionar un texto | <input>, <textarea> |
onsubmit |
Enviar el formulario | <form> |
onunload |
Se abandona la página, por ejemplo al cerrar el navegador | <body> |
Prueba estos tres ejemplos de eventos en JavaScript. Instala y utiliza un editor con Notepad++ o Sublime.
<button onmousedown=" this.innerHTML= 'X' ">?</button>
<button onmouseover="this.innerHTML= 'X' ">.</button>
<button onmouseover="this.innerHTML= 'X' ">.</button>
<button onmouseover="this.innerHTML= 'X' ">.</button>
Ahora tres botones<table>
<tr>
<td id="celda0" onclick="this.innerHTML= 'X' ">.</td>
<td id="celda1" onclick="this.innerHTML= 'X' ">.</td>
<td id="celda2" onclick="this.innerHTML= 'X' ">.</td>
</tr>
</table>
| . | . | . |
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0