lunes, 2 de diciembre de 2019

Tema 5 -- Interacción con el usuario. Eventos.

Interacción con el usuario. Eventos.

Manejadores como atributos de elementos en línea

Forma menos profesional y más facil

Incluir varios manejadores para varios eventos sobre un mismo elemento HTML:

<h3  id="txt1" onclick="this.innerHTML='Javascript en XHTML'"
              onmouseover="this.style.background='red'"
               onmouseout="this.style.background='white'">Pulsa aquí para ver lo que se ejecuta</h3>




<p onclick="funcion(this);">
 p.onclick = cambiar; 


Resumiendo: el principal inconveniente de los manejadores como atributos de elementos en línea es que el código HTML se complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es recomendable para casos sencillos y puntuales.


Manejadores como funciones JavaScript externas

En las funciones externas no es posible utilizar la variable this de la misma forma que en los manejadores insertados en los atributos HTML. Por tanto, es necesario pasar la variable “this” como parámetro a la función manejadora:

<h3 onclick="cambiar(this)">Pulsa aquí para ver qué se ejecuta</h3>
<script>
   function cambiar(elem) {
       elem.innerHTML = "Javascript en HTML y función externa";
   }
</script>

Hay acciones que desencadenan varios eventos. Para evitar que el navegador ejecute la acción por defecto necesitamos añadir "return false;"


<a href="http://www.google.com" onclick="alertar(); return false;">Pulsa aquí para ver qué se ejecuta</a>
<script>
    function alertar() {
        alert("Vamos a Google");
    }
</script>



elemento.addEventListener (“click”, funcion(){ }); 
elemento.removeEventListe ner(“click”, function());



Manejadores Semánticos


<h3 id="tradicional">Pulsa aquí para ver lo que se ejecuta</h3>
<script>
   //Accedemos al elemento y a su evento onclick le asignamos una función
   document.getElementById("tradicional").onclick = cambiar; //¡¡Sin paréntesis!!
   function cambiar() {
       alert("Entramos en cambiar");
       document.getElementById("tradicional").innerHTML = "Modelo Semántico";
      //Hace que solo funcione una vez ya que desactiva el evento poniéndolo a null.
       document.getElementById("tradicional").onclick = null;
    }
</script>


<h3 id="tradicional">Pulsa aquí para ver lo que se ejecuta</h3>
<script>
   window.onload = function {
       document.getElementById("tradicional").onclick = cambiar; //¡¡Sin paréntesis!!
       function cambiar() {
          alert("Entramos en cambiar");
          document.getElementById("tradicional").innerHTML = "Modelo Semántico";
          document.getElementById("tradicional").onclick = null;
    } 

       //window.onload = cargaEventos();
       //cargaEventos =  function () { ------------------   }
   }
</script>
→ window.onload = function { } : Nos asegura que el código ejecutado entre sus llaves será ejecutado una vez que la página se haya cargado por completo.



elemento.addEventListener(“click”, funcion );
window.event -> e.type == “click” etc
e.target == “p” || e.target.id == “idP”
onclick=”alerta(); return false;” Primero alerta y no te lleva a ningun lado mas, si pones true, si.


 Modelo de registro de eventos de la W3C

Modelo más utilizado.


La sintaxis básica para añadir un manejador a un evento indicado se realiza con la sintaxis:

elemento.addEventListener("<evento_sin_on>",<función>,<false|true>);

y podemos eliminar o cancelar el evento con el siguiente método:

elemento.removeEventListener("<evento_sin_on>",<función>);


Veamos un ejemplo:
<h1>Modelo de eventos avanzados del W3C</h1>
<h3 id="w3c">Modelo del W3C</h3>
<script>
   
    document.getElementById("w3c").addEventListener("click", saludarUnaVez, false);
    document.getElementById("w3c").addEventListener("click", colorearse, false);
    document.getElementById("w3c").addEventListener("mouseover",fondo, false);
    function saludarUnaVez() {
        alert("¡Hola, caracola!");
        document.getElementById("w3c").removeEventListener("click", saludarUnaVez);
    }
    function colorearse() {
        document.getElementById("w3c").style.color = "red";
    }
    function fondo() {
        document.getElementById("w3c").style.background = "blue";
    }
</script>


Este modelo también nos permite aplicar funciones anónimas las cuales son eventos que no tienen un nombre determinado:
<h3 id="w3canonima">Modelo del W3C con funciones anónimas</h3>
<script>
    document.getElementById("w3canonima").addEventListener("click", function () {
        this.style.background = "#C0C0C0";
    }, false);
</script>

Una posibilidad muy importante que nos ofrecen las funciones anónimas es la posibilidad de llamar a funciones a los que tengamos que pasarle parámetros:
<h3 id="msanonima">Modelo de W3C</h3>
<script>
  document.getElementById("msanonima").addEventListener("click", function () {
    funcionConParametros( parametro1 );
});
  function funcionConParametros ( parametro1 ) { //Hacemos algo }; 
</script>



Como vemos una de las ventajas que ofrece este modelo es que podemos añadir todos los manejadores que deseemos a los mismos eventos de los mismos elementos HTML.



Extraer información de los eventos - reutilización de código


La propiedad “window.event” nos resultará fundamental ya que gracias a esta podemos obtener información sobre los eventos, y entre las propiedades que podemos usar destacaremos 2:

window.event.type: nos da información sobre el tipo de evento generado (onclick, mouseover, etc).

window.event.target.id: nos devuelve el “id” del elemento HTML que ha generado el evento.




Veamos un ejemplo de su utilización:
<h1 id="eventos">Obtener información de un evento</h1>
<h2 id="parrafo1">Párrafo 1</h2>
<h2 id="parrafo2">Párrafo 2</h2>
<script>
      //Asignamos misma función a diferentes tipos de eventos:
    document.getElementById("eventos").addEventListener("mouseover", manejador);
    document.getElementById("eventos").addEventListener("mouseout", manejador);
      //Asignamos misma función a mismo eventos de elementos HTML diferentes:
    document.getElementById("parrafo1").addEventListener("click", saludo);
    document.getElementById("parrafo2").addEventListener("click", saludo);

    function manejador(e) {
        //Obtenemos el window.event
        if (!e)
               e = window.event;
        switch (e.type) {  //Obtenemos el tipo de evento, y base, actuamos:        
        case "mouseover":
            this.style.color = "purple";
            break;
        case "mouseout":
            this.style.color = "yellow";
            break;
        }
    }
    function saludo(e) {
        //Obtenemos el window.event con el fin de obtener el target.id
        if (!e) e = window.event;
        if (e.target.id == "parrafo1") 
               alert("Has pulsado el primer párrafo");
        else if (e.target.id == "parrafo2") 
               alert("Has pulsado el segundo párrafo");
       
          alert("Has pulsado el " + e.target.id);
    }
</script>




Tipos de eventos

Eventos de ratón

Los eventos de ratón son, con mucha diferencia, los más empleados en las aplicaciones web. Los eventos que se incluyen en esta clasificación son los siguientes:
  • click: Se produce cuando se pulsa el botón izquierdo del ratón. También se produce cuando el foco de la aplicación está situado en un botón y se pulsa la tecla ENTER.
  • dblclick: Se produce cuando se pulsa dos veces el botón izquierdo del ratón.
  • mousedown: Se produce cuando se pulsa cualquier botón del ratón.
  • mouseout:  Se produce cuando el puntero del ratón se encuentra en el interior de un elemento y el usuario mueve el puntero a un lugar fuera de ese elemento.
  • mouseover: Se produce cuando el puntero del ratón se encuentra fuera de un elemento y el usuario mueve el puntero hacia un lugar en el interior del elemento.
  • mouseup: Se produce cuando se suelta cualquier botón del ratón que haya sido pulsado.
  • mousemove: Se produce (de forma continua) cuando el puntero del ratón se encuentra sobre un elemento.

Eventos de teclado

Los eventos que se incluyen en esta clasificación son los siguientes:
  • keydown: Se produce cuando se pulsa cualquier tecla del teclado. También se produce de forma continua si se mantiene pulsada la tecla.
  • keypress: Se produce cuando se pulsa una tecla correspondiente a un carácter alfanumérico (no se tienen en cuenta teclas como SHIFT, ALT, etc.). También se produce de forma continua si se mantiene pulsada la tecla.
  • keyup: Se produce cuando se suelta cualquier tecla pulsada.

Eventos HTML

Los eventos HTML definidos se recogen en la siguiente tabla:
  • load: Se produce en el objeto window cuando la página se carga por completo. En el elemento <img> cuando se carga por completo la imagen. En el elemento` cuando se carga el objeto.
  • unload: Se produce en el objeto window cuando la página desaparece por completo (al cerrar la ventana del navegador por ejemplo). En el elemento <object> cuando desaparece el objeto.
  • abort: Se produce en un elemento <object> cuando el usuario detiene la descarga del elemento antes de que haya terminado.
  • error: Se produce en el objeto window cuando se produce un error de JavaScript. En el elemento <img> cuando la imagen no se ha podido cargar por completo y en el elemento <object> cuando el elemento no se carga correctamente.
  • select: Se produce cuando se seleccionan varios caracteres de un cuadro de texto (<input> y <textarea>).
  • change: Se produce cuando un cuadro de texto (<input> y <textarea>) pierde el foco y su contenido ha variado. También se produce cuando varía el valor de un elemento <select>.
  • submit:  Se produce cuando se pulsa sobre un botón de tipo submit (<input type="submit">).
  • reset: Se produce cuando se pulsa sobre un botón de tipo reset (<input type="reset">).
  • resize: Se produce en el objeto window cuando se redimensiona la ventana del navegador.
  • scroll: Se produce en cualquier elemento que tenga una barra de scroll, cuando el usuario la utiliza. El elemento <body> contiene la barra de scroll de la página completa.
  • focus: Se produce en cualquier elemento (incluido el objeto window) cuando el elemento obtiene el foco.
  • blur: Se produce en cualquier elemento (incluido el objeto window) cuando el elemento pierde el foco.

Enlaces de ayuda:






Etiquetas: , ,