Curso de Javascript: Eventos

Listado de Eventos

A continuación veremos casi todos los eventos disponibles, su descripción, es decir, cuando se vana disparar y sorbe que elementos del HTML responden. 
Evento Descripción Elementos para los que está definido
onblur Deseleccionar el elemento <button><input><label>,<select><textarea><body>
onchange Deseleccionar un elemento que se ha modificado <input><select><textarea>
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onfocus Seleccionar un elemento <button><input><label>,<select><textarea><body>
onkeydown Pulsar una tecla (sin soltar) 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 La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón «sale» del elemento (pasa por encima de otro elemento) Todos los elementos
onmouseover El ratón «entra» en el elemento (pasa por encima del elemento) Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Se ha modificado el tamaño de la ventana del navegador <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>

Manejo de Eventos

Para gestionar los eventos es necesario conocer de antemano sobre que elemento queremos cambiar su comportamiento, para ello usaremos el método getElementById(), donde indicaremos como parámetro el nombre del ID que buscamos en el DOM.
Una vez tenemos una variable con el elemento deberemos ejecutar el método addEventListener(), al cual le pasamos tres parámetros, nos importan los dos primeros, uno es el nombre del evento, sin el on delante y el segundo parámetro es el nombre de la función que se ejecutará ante ese evento.

En los ejemplos que veremos a continuación se mostrará el código HTML con el que vayamos a interactuar y el código JS correspondiente. Por simplificar la edición se ha eliminado la etiqueta <script> pero en cuanto se vea el código JS será evidente que parte es cada.

Un evento básico

En el siguiente ejemplo veremos el funcionamiento general de la modificación de los eventos
Se declara en el html un botón con el id=»boton» desde JS localizamos el elemento con el getElementById(«boton»), llamamos al método addEventListener, le pasamos como primer parámetro  el evento a modificar, en este caso el onclick, eliminamos el on, y dejamos el click y luego le aplicamos la función hazAlgo.
De esta manera cada vez que pulsamos el botón sacará un mensaje por consola.

<button id=«boton»>Pulsame</button>

//código JS

function hazAlgo(){
      console.log(«He hecho algo»);
      }

document.getElementById(«boton»).addEventListener(«click», hazAlgo,false);

Carga del documento

Unas vez conocida la mecánica de la gestión del evento, es necesario conocer dos de los principales eventos en la carga de una página en el navegador, estos son load y DOMContentLoaded.
DOMContentLoaded es el evento que se dispara cuando se ha terminado de leer el documento HTML desde el servidor. Si queremos incluir el código JS para modificar cualquier elemento que esté presente en el HTML será necesario esperar a que este evento se dispare.  
Por otra parte está onload, que se disparará cuando se terminen de cargar todos aquellos elementos relacionados con el HTML, es decir CSS, JS, Imágenes, etc… Si tenemos que interactuar contra imágenes es necesario esperar al evento onload. 
Veamos dos ejemplo de uso, uno de cada uno de los dos eventos indicados:
<script type=«text/javascript»>
    function load(){
    console.log(«todo el contenido cargado»);
    }
      window.addEventListener(«load», load, false);
      function loaded(){
      console.log(«Todo el HTML cargado»);
      }
      document.addEventListener(«DOMContentLoaded», loaded, false);
    </script>
En estos dos ejemplos podemos ver cómo asociar una función a cada uno de los dos eventos.
Como puede verse para manejar el evento onload es necesario realizarlo sobre el objeto window y el método addEventListener. Ene l ejemplo se asocia la ejecución del método load. 
En el segundo caso se asocia la función loases al evento DOMContentLoaded del objeto document. 
Si realizáramos la carga de este script en cualquier HTML, veríamos que primero se ejecuta l función loaded y luego la función load. Ya que primero se carga el HTML y luego se cargan todos aquellos elementos relacionados con el HTML. 

Evitar la ejecución de la funcionalidad por defecto ante un evento

Hasta ahora los eventos que hemos manejado no tienen mayor funcionalidad asociada por defecto. En  el caso de hacer click en un botón por defecto el navegador no hace nada, al igual que en la carga de la página. Pero que pasaría si quisiéramos evitar que ese comportamiento por defecto se ejecutase. 
Imaginemos un enlace una página que nos lleva a google:
<a href=«http://www.google.es/» id=«vete»>Vete a google</a>
En este caso si pulsamos el enlace el navegador automáticamente va a intentar dar el salto a ir a la página de google, es decir, su comportamiento por defecto es el de dar el salto. 
Desde JS podemos evitar que este comportamiento por defecto se ejecute. Veamos cómo…
function noIr(event){
      console.log(«HEcho antes de ir a google»);
      event.preventDefault();
      }
      document.getElementById(«novayas»).addEventListener(«click», noIr,false);

En este caso hemos seleccionado el elemento mediante el método getElementoById(«novayas»), esto nos devuelve el elemento del enlace que veíamos más arriba. Al aplicar el método addEventListener sobre el evento «click» y asociarlo a la función noIr, no estamos haciendo nada que no hayamos hecho antes 🙂 salvo por una sutil diferencia…
Fíjate que en la función noIr le estamos pasando un parámetro llamado event, este parámetro event nos lo pasarán siempre, lo único es que hasta ahora estábamos pasando de él jijiji
Este objeto event, dispone de una serie de propiedades y métodos que nos permiten interactuar con el evento y el elemento que ha disparado el evento, pero por ahora nos centraremos en el método preventDefault(). Este método permite evitar que se ejecute el comportamiento por defecto asociado a dicho evento, en este caso en click en el enlace que hemos seleccionado. 
De esta manera aunque el navegador tiene designado que es un enlace y debería ir a la dirección indicada por la URL del href, le estamos indicando que no queremos que se realice dicho salto. Por lo tanto sólo se realizará lo que nosotros le indiquemos dentro de la función de Callback, que le hemos pasado como parámetro noIR. 
Ésta te´chica puede aplicarse a cualquiera de los eventos que hemos estudiado en este tema por lo que podemos cambiar el comportamiento completo del navegador.

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Categorías de Cursos

RSS Cursos de Desarrollo

  • Introducción a las PWA (Progressive Web Apps) 21/02/2020
    Las PWA se han convertido es una alternativa a las aplicaciones web para colonizar de una manera más eficiente los móviles debido a que pueden funcionar de manera offline y optimizar el rendimiento de la aplicación desde el móvil. Si quieres enterarte de cómo crearlas, de los pros y contras no te pierdas el último […]
  • Introducción al Testing Web 10/02/2020
    Hemos publicado en nuestro canal de Youtube un vídeo grabado durante las clases de un curso de Python Avanzado. El tema es el de Testing Opensource hablado sobre la teoría de Testing, indicando los distintos tipos de pruebas e identificando las herramientas que se usan a la hora de probar una web.
  • Entrevista a Alejandro López CEO de Slimbook 10/02/2020
    Esta semana hemos entrevistado en República Web, a Alejandro López, CEO de Slimbook. Hablamos de sus productos y sobre equipos para desarrolladores, diseñadores web, fotógrafos, editores de vídeo y data scientist. Te lo vas a perder?
  • Gadgets para el formador itinerante: Router Wifi de Viaje 08/02/2020
    Muchas veces los formadores y profesionales itinerantes tenemos el problema de tener que conectarnos a Internet desde hoteles o cafeterías para seguir haciendo nuestro trabajo, en esta entrada veremos un router wifi de viaje muy interesante que he estado utilizando desde hace un tiempo y que me ha dado muy buenos resultados. Como todo en […]
  • Balanceadores de Carga 27/01/2020
    Dentro de la arquitectura web necesitamos cumplir con dos condiciones si queremos que nuestra arquitectura sea suficientemente sólida: Alta Disponibilidad y Alto Rendimiento, en esta entrada veremos cómo cumplir con estos dos principios. La alta disponibilidad trata de conseguir que un servicio tenga el máximo posible de tiempo de disponibilidad, es decir, que el servicio […]
  • Serie de Artículos de Docker 13/01/2020
    En esta entrada veremos cómo manejar Docker, en una serie de artículos explicativos. No te los pierdas He instalado Docker, ¿Y ahora qué? Docker Compose, para cuando quieres arrancar varios contenedores de manera coordinada
  • ¿Que Frameworks de Frontend son los más utilizados en el millón de páginas del Top de Alexa? 09/01/2020
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]
  • Artículos de administración de Servidores 08/01/2020
    Esta serie de artículos nos permiten saber cómo se instala y se configura un servidor desde cero: Nuevo Servidor NAS reciclado Acceso a servidor de la oficina desde fuera gracias a dinaip Configuración de un firewall de manera sencilla en Debian/Ubuntu
  • ¿Cuál es el uso de WordPress en los principales sitios de Internet según Alexa? 14/12/2019
    Empezamos con nuestra serie de publicaciones sobre tecnologías concretas que más se usan en Internet, en este caso con WordPress. ¿Quieres saber cómo es de importante y cuánto se utiliza? No te pierdas esta entrada.
  • Estudio de Uso de Tecnologías en el millón de páginas más vistas según Alexa 13/12/2019
    Partiendo de la idea del blog de de Andros, y del post sobre su estudio del uso de WordPress con un ejemplo de Clojure. He iniciado un proyecto secundario sobre el uso de las tecnologías usadas en las, más de 1.000.000 principales webs de Internet según Alexa. La idea, es la de ampliar la publicación […]

Si estás interesado en seguir formándote tenemos una serie de cursos gratuitos: http://cursosdedesarrollo.com/cursos/

También disponemos de algunos cursos de pago por si son de tu interés: https://cursosdedesarrollo.com/tienda/

Curso de Angular: https://cursosdedesarrollo.com/tienda/angular/

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies