Conceptos de DHTML

Un evento es un suceso que ocurre cuando se presiona una tecla, se presiona un botón, se dispone la flecha del mouse en una región, etc. Desde JavaScript podemos capturar estos eventos y efectuar un proceso (cambiar la fuente, abrir otra página, mostrar un mensaje etc.)

A pesar de una corta historia que tiene internet, la gestión de eventos a variado mucho desde la aparición de las primeras versiones de JavaScript.

Primero veremos la forma clásica de captura de eventos asociando a las marcas html de la página el nombre del evento y la función que se dispara. Si bien esta metodología está cayendo en desuso a medida que pasa el tiempo, todavía existen millones de páginas programadas de esta forma.

Seguidamente y tal vez la más importante forma de procesar los eventos es la propuesta por el comité de estandares de internet W3C

Veamos el evento más común llamado onclick.Se dispara cuando se presiona el botón del mouse sobre el elemento HTML. Lo hemos estado utilizando constantemento a lo largo de este tutorial para capturar la presión de un botón.

Se puede capturar el evento onclick de practicamente todos los elementos visuales HTML disponibles (botones, párrafos, tablas, enlaces etc.)

Para ver su funcionamiento crearemos una página con un párrafo, un botón y una tabla. Mostraremos un mensaje si se presiona el párrafo o el botón o la primera casilla de la tabla.
El archivo html es:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <p onclick="presionParrafo()">Esto es un párrafo</p>
    <table border="1">
        <tr>
            <td onclick="presionCasilla11()">casilla 1,1</td>
            <td>casilla 1,2</td>
        </tr>
        <tr>
            <td>casilla 2,1</td>
            <td>casilla 2,2</td>
        </tr>
    </table>
    <input type="button" value="botón" onclick="presionBoton()">
    <script src="funciones.js"></script>
</body>

</html>

El archivo funciones.js es:

function presionParrafo() {
    alert('se presionó el párrafo');
}

function presionCasilla11() {
    alert('se presionó la casilla 1,1');
}

function presionBoton() {
    alert('se presionó el botón');
}

Como podemos observar para asociar un evento a una elemento HTML debemos agregar la propiedad respectiva:

<p onclick="presionParrafo()">

Esto se repite para los otros dos elementos:

<td onclick="presionCasilla11()">casilla 1,1</td><td>casilla 
1,2</td>

<input type="button" value="botón" onclick="presionBoton()">

Por otro lado, definimos en el archivo funciones.js las tres funciones que se ejecutarán cuando ocurra el evento del objeto respectivo.

25 - Evento onclick

Retornar