20. JavaScript en HTML: eventos

-

Registrar manejadores de eventos

MÉTODO 1: registrar el manejador como una propiedad del elemento

Es posible, registrar un manejador asignandole la función manejadora del evento a una propiedad.

Las propiedades pueden ser "onclick", "onload", "onchange", "onmouseover", etc.

Ejem:
 
HTML:  <button>pulsa</button>
         
JS: 
    var a = document.getElementsByTagName('button');
    a[0].onclick = function() {
      alert("has pulsado");
    }
Como se puede ver, hemos definido una función sin nombre alguno, cuyo cuerpo son las sentencias que se ejecutarán cuando el usuario pulse sobre el elemento <button>.


MÉTODO 2: registrar un manejador como un atributo del elemento

Es posible registrar un manejador de evento a través de un atributo en el propio elemento.

Ejem:

HTML: <button onclick="alert('Has pulsado')">pulsa</button>

Como se puede ver, en este caso, la función está escrita directamente sobre el atributo.


MÉTODO 3: registrar un manejador a través de la función addEventListener()

Podemos registrar el evento a través de la función addEventListener(). Es la opción recomendada.

En este caso, el nombre de los eventos no lleva el prefijo "on". Por ejemplo, "onclick" pasa a ser simplemente "click".


Ejem:

HTML: <button>pulsa</button>

JS:        var a = document.getElementsByTagName('button');
       a[0].addEventListener('click', function() {
         alert("has pulsado");
       });


¡OJO!: en los ejemplo de los 3 métodos, hemos llamado a una función anónima, pero es igualmente posible llamar a una función definida independientemente. Por ejemplo:

JS:   function miFuncion() {
        alert("has pulsado");
     }
  
     var a = document.getElementsByTagName('button');
     a[0]. addEventListener('click', function() {
        miFuncion();
     });

¿Y qué ocurrirá si asignamos varios eventos a un mismo elemento?

Respuesta: si asignamos el evento a través de una propiedad o un atributo, el manejador del evento que se ejecutará será el último registrado.

Pero si registramos el manejador del evento a través de la función addEventListener(), todos los manejadores se registran, es decir no se pisan. Es posible registrar multiples manejadores para un mismo elemento usando addEventListener().

Ejercicio: probar a registrar eventos usando los 3 métodos comprobando que se "pisan" si usamos una propiedad o un atributo, y que no se pisan si usamos la función addEventListener().

El argumento del manejador de eventos

Los manejadores de eventos suelen llevan asociados un objeto de tipo evento, que se coloca como argumento de la función del manejador:

Ejem:

HTML: <button>pulsa</button>

JS: var a = document.getElementsByTagName('button');
       a[0].addEventListener('click', function(event) {
         alert("has pulsado");
         console.log(event);
       });

El objeto evento contiene información sobre el evento, por ejemplo, en el caso del evento "click", es posible acceder las coordenadas X-Y del area de visualización del navegador donde se ha realizado el "click".

El nombre que le demos es arbitrario: en este caso le hemos puesto nombre "event" pero le se puede ver en mucho casos como "e" simplemente.

El objeto "this"

En el interior de la función que maneja el evento, es posible acceder al elemento que lo ha lanzado a través de la palabra clave "this".

Ejem:

HTML:   <button>pulsa</button>

 JS:           var a = document.getElementsByTagName('button');
       a[0].addEventListener('click', function(event) {
         alert("has pulsado");
         console.log(this);  //muestra en consola el elemnt "button"
       });

De esta manera es posible hacer referencia al elemento que ha lanzado el evento y manipularlo (cambiarlo de color, eliminarlo, etc). También podemos manipular elementos adyacentes, por ejemplo el elemento padre.

Detectar que un elemento se ha cargado

Gracias al evento "onload", es posible detectar el momento en el que uno de los siguientes elementos HTML ha terminado de cargarse en la página: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script> y <style>.


Ejem:

HTML: <img src="..." alt="...">

JS:    a = document.getElementsByTagName('img');
    a[0].onload = function() { alert() };

En la anterior lista de elementos, aparece el elemento <body>. Es decir, vamos a ser capaces de detectar cuando el elemento <body> y los elementos que contiene se han terminado de cargar en la página.

De esta manera ya no será obligatorio, añadir nuestro código ANTES DEL CIERRE DEL <body>.

Ejem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  <body>
    <h1>Lorem ipsum</h1>
   
    <script>
      var a = document.getElementsByTagName('body');
      a[0].onload = function() {

        //es posible recuperar el elemento <img> a pesar de que
        //todavía no está cargado (aparece al final del body)
        console.log(document.getElementById("imagen"));
      };
    </script>
   
    <img id="imagen" src="http://www.ziiweb.com/images/logo.png">
  
  </body>
</html>


Esto no quiere decir, a partir de ahora tengamos que colocar nuestro código JS en cualquier parte del "body". Colocar el código JS antes de la etiqueta </body> es una práctica muy extendida y nos evita tener que hacer uso de "onload".

En cualquier caso, el código anterior nos limita a escribir nuestro <script> en el interior del "body". Es posible escribir un "script" incluso dentro del "head". En ese caso tendremos que usar el evento "load" para el elemento "window".

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <script>
     
      window.onload = function() {
        console.log(document.getElementById("imagen"));
      };
     
    </script>
  </head>
 
  <body>
   
    <img id="imagen" src="http://www.ziiweb.com/images/logo.png">
  
  </body>
</html>

 El objeto "window" representa una ventana en el navegador.

Eventos del ratón

Es posible detectar cuando el usuario interactua con el raton en alguno de los elementos HTML.

Por ejemplo podemos lanzar un evento cuando el usuario hace click o simplemente pasa el ratón sobre un elemento.

Ejemplo:

HTML: <h1>Pasa por encima el ratón</h1>

 JS:    var a = document.getElementsByTagName("h1");
    a[0].addEventListener('mouseover', function() {
      alert("has pasado el ratón por encima");
    });

Eventos en un formulario

A través del evento "onchange", es posible detectar:

  • Un cambio de opción en un elemento <select> (combo) de HTML.
  • Un cambio en el estado de un elemento <input type="checkbox">
  • Un cambio en el valor elegido en un elemento <input type="radio">

Veamos un ejemplo de cada uno:

<select>



 HTML:
    
    <select>
      <option>Madrid</option>
      <option>Barcelona</option>
      <option>Valencia</option>
    </select>

JS:
      var a = document.getElementsByTagName("select")[0];
      a.addEventListener('change', function() {
        alert();
      });

Este evento nos puede permitir mostrar <selects> dependientes. Es decir, por ejemplo un formulario donde se tiene que seleccionar la provincia y a continuación la población.

<input type="checkbox">


 HTML: 

            <input type="checkbox">
JS:
            var a = document.getElementsByTagName("input")[0];
     a.addEventListener('change', function() {
       alert();
     });


<input type="radio">


 HTML: 

     <input type="radio" name="genero">
    <input type="radio" name="genero">
JS:
          var a = document.getElementsByTagName("input")[0];
    a.addEventListener('change', function() {
      alert();
    });


También es posible detectar cuando el usuario escribe en una casilla de texto (<input>) a través del evento "oninput".

Ejemplo:

HTML:
     
      <input>

JS:
      var a = document.getElementsByTagName("input")[0];
      a.addEventListener('input', function() {
        alert();
      });

Ejercicio: crear una tabla HTML, y a continuación, registrar un manejador para el evento "click", de manera que cuando se pulse sobre alguna de las celdas se borre la tabla entera. Dificultad: facil-medio.

Ejercicio: crear un texto que al pulsarlo cambie de color a través de "this.style.color". Dificultad: facil-medio.

Ejercicio: crear un texto que al pulsarlo cambie de color de color su elemento elemento padre. El elemento puede ser un elemento "<div>" por ejemplo. Dificultad: facil-medio.

Ejercicio: crear 2 casillas tipo <input> y un botón <button>, de manera que al pulsar sobre el bóton, en la segunda casilla aparezca el valor escrito en la primera casilla más 10. Dificultad: medio.

Ejercicio: crear 3 casillas tipo <input> y un botón <button> de manera que al pulsar sobre el botón, aparezca en la tercera casilla el resultado de sumar los valores de la primera y la segunda casilla. Dificultad: medio.
     











Comentarios

Publicar un comentario

Entradas populares de este blog

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más