Eventos en Javascript

Los eventos en Javascript son reacciones del código sobre interacciones que el usuario final realiza sobre tu aplicación.

Por ejemplo si haces clic en una instancia específica de tu aplicación que está programada con el evento onClick, entonces pasará algo que hayas decidido, por ejemplo que alguna parte de la página cambie de color, que suene un sonido, o literalmente, cualquier cosa que se te ocurra.

Video Explicativo

Código Relacionado en el video

Demo Página Web Subida a GitHub Pages

En el siguiente enlace puedes ver la página creada en el vídeo tutorial

https://configuroweb.github.io/tutorial-eventos-javascript/

Los más comunes eventos en Javascript

Los eventos son el super poder de Javascript que permite que una página estática adquiera lógica de negocio para realizar diferentes procesos avanzados, dandole baterías a tu aplicación.

A continuación se muestran los eventos más comunes de Javascript, con una explicación general de su código:

Evento onClick

El evento onClick se activa en cuanto el usuario final le da click a la zona que se defina y se puede programar para que se realicen los cambios que se consideren sobre tu aplicación.

Ejemplo del Evento onClick

En la etiqueta html de botón, la etiqueta button, se le pone una palabra clave onclick, esta palabra llama una función, llamada funcion() como se puede ver en el código a continuación:

<button onclick="funcion()">clic acá</button>

La función funcion() al activarse puede hacer lo que se defina que haga, desde recorrer un array con un forEach, gestionar un Objeto en Javascript o como en el ejemplo, modificar el texto de lo que dice en una etiqueta p.

function funcion() {
    document.getElementById("aca").innerHTML = "Haz dado click en el botón";
  }

A continuación se muestra el código donde se especifica la etiqueta p a modificar:

<p id="aca"></p>

El código en Javascript reconoce el id donde dice aca, con la instrucción document.getElementById(“aca”).innerHTML donde dice innerHTML, es lo que va a modificar y donde dice document.getElementById es como se busca en el documento donde haya el id con el aca.

Eventos mouseDown y mouseUp

Estos eventos suceden cuando el usuario final hace clic y cuando lo suelta, mientras haga clic sostenido se activará onmouseup, y cuando suelte donde previamente se hizo clic se activará onmousedown

Ejemplo de eventos onmouseup y onmousedown

En la etiqueta html de botón, la etiqueta button, se ponen las palabras clave onmousedown y onmouseup, esta palabras llaman las funciónes, mouseDown y mouseUp como se puede ver en el código a continuación:

<button id="color" onmousedown="mouseDown()" onmouseup="mouseUp()">
click acá</button>

Las funciones mouseDown() y mouseUp() al activarse puede hacer lo que se defina que haga, en este caso se cambian los colores a rojo si se hace clic sostenido y a azul si se deja suelto.

 function mouseDown() {
    document.getElementById("color").style.background = "red";
  }
  
  function mouseUp() {
    document.getElementById("color").style.background = "blue";
  }

A continuación se muestra el código donde se especifica la etiqueta button a modificar:

<button id="color" onmousedown="mouseDown()" onmouseup="mouseUp()">
click acá</button>

El código en Javascript reconoce el id donde dice aca, con la instrucción document.getElementById(“color”).innerHTML donde dice innerHTML, es lo que va a modificar y donde dice document.getElementById es como se busca en el documento donde haya el id con el color.

Eventos onblur y onfocus

El evento onfocus se dispara cuando ingresas en un campo y el onblur se activa cuando sales del campo.

La lógica de lo que se puede hacer con onblur y con onfocus depende de lo que quieras hacer, en el código de ejemplo a continuación, cuando se hace clic afuera los caracteres se ponen en mayúscula y cuando ingresas al campo nuevamente los caracteres se pondrán en minúscula.

<h2>Eventos onblur y onfocus</h2> <input type="text" id="campo" onblur="onBlur()" onfocus="onFocus()">

En el código a continuación se muestra la lógica Javascript para dejar los caracteres y mayúscula y minúscula:

function onBlur() {
    let x = document.getElementById("campo");
    x.value = x.value.toUpperCase();
  }

  function onFocus() {
    let x = document.getElementById("campo");
    x.value = x.value.toLowerCase();
  }

Evento onmouseover

En el siguiente código se muestra una imagen que se pone más grande cuando le pones el puntero del mouse encima y vuelve a su tamaño normal cuando le retiras el mouse.

<img onmouseover="imgGrande(this)" onmouseout="imgNormal(this)" border="0" src="logo.png" width="32" height="32">

A continuación se muestra el tramo de código de javascript donde se ingresa la lógica para aumentar el tamaño de la imagen al pasarle el mouse por encima y luego vuelve a su tamaño normal al retirarle el mouse:

function imgGrande(x) {
    x.style.height = "64px";
    x.style.width = "64px";
  }
  
  function imgNormal(x) {
    x.style.height = "32px";
    x.style.width = "32px";
  }

Evento onchange

Este evento onchange, se da cuando se modifica el campo, en el ejemplo a continuación se muestra como según se elige una opción en una lista desplegable se muestra un texto específico con la selección del desplegable:

<select id="seleccion" onchange="cambio()">
        <option value="Javascript">Javascript</option>
        <option value="PHP">PHP</option>
        <option value="Node">Node</option>
        <option value="Python">Python</option>
      </select>

A continuación se muestra la lógica de javascript, para ingresar las palabras Has seleccionado junto al texto de la lista correspondiente:

function cambio() {
    var x = document.getElementById("seleccion").value;
    document.getElementById("seleccionado").innerHTML = "Has seleccionado: " + x;
  }

Evento onselect

Este evento se dispara al seleccionar un texto específico, en el ejemplo a continuación, se dispara un alert indicando que se ha seleccionado el texto

<input type="text" value="seleccioname" onselect="seleccion()">

A continuación se muestra la lógica de la función seleccion que dispara el evento onselect

function seleccion() {
    alert("Has seleccionado texto");
  }

Eso ha sido todo, cualquier duda quedo al pendiente, te invito a que leas mi contenido, constantemente genero contenido sobre aplicaciones gratuitas de libre distribución, aplicaciones premium me sigas en mi canal de youtube donde constatemente subo videos y tutoriales de las aplicaciones que subo al blog.