JavaScript

Eventos

¿Que es?

 

    

  • Presionar una tecla
  • Hacer click sobre un boton
  • Posicionar el mouse sobre un elemento HTML
  • Terminar de cargar el sitio

 

Un evento es un "suceso" que le ocurre a nuestro código HTML y al cual podemos reaccionar.

¿Como funciona?

 

El navegador detecta las interacciones del usuario, así como también la carga de contenidos, y dispara eventos para que nosotros podamos escucharlo y reaccionar ante ellos.

¿Como los escuchamos?

 

Para escucharlo hacemos uso de "handlers" que nos permiten tomar acciones a partir de un evento dado.

<p>Presione donde guste para activar el handler</p>
<script>
  addEventListener("click", function() {
    console.log("Clickeaste!");
  });
</script>

Ver Ejemplo

El Handler

Los Handlers pueden ser definidos en un elemento del DOM, de esta manera, escuchamos solamente cuando el evento ocurre en dicho elemento.

<button>Tócame</button>
<p>Si aprietan acá no pasa nada</p>
<script>
  var button = document.querySelector("button");
  button.addEventListener("click", function() {
    console.log("Clickeaste sobre el boton.");
  });
</script>
Ver Ejemplo

Podemos remover un Handler una vez usado

utilizando el método removeEventListener.

<button>Funciono solo una vez</button>
<script>
  var button = document.querySelector("button");
  function once() {
    console.log("Listo.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

Ver Ejemplo

Event Object

Al callback de nuestro handler se le pasa como argumento el evento disparado.

De esta manera obtenemos mas información respecto al evento.

<button>Apretame como gustes.</button>
<script>
  var button = document.querySelector("button");
  button.addEventListener("mousedown", function(event) {
    switch(event.which) {
	case 1:
	    console.log("Botón izquierdo del mouse");
	    break;
	case 2:
	    console.log("Botón central del mouse");
	    break;
	case 3:
	    console.log("Botón derecho del mouse");
	    break;					
    }
  });
</script>

Ver Ejemplo

Target

Uno de los atributos principales del Event Object es el target, este define donde se origino el evento.

 

<button>A</button>
<button>B</button>
<button>C</button>
<script>
  document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON")
      console.log("Aprete", event.target.textContent);
  });
</script>

Ver Ejemplo

TimeStamp

El atributo timeStamp del Event Object define en que momento temporal ocurrió el evento.

<p></p>
<script>
  var p = document.querySelector("p");
  addEventListener("click", function(event) {
    p.innerHTML = "Hice click en el momento - " +new Date(event.timeStamp);
  });
</script>

Ver Ejemplo

Propagación

Cuando se dispara un evento desde un elemento HTML, todos los padres de ese elemento también escucharan el evento.

La función stopPropagation definida sobre el Event Object detiene la propagación.

<p>Un párrafo que contiene un <button>Botón</button>.</p>
<script>
  var para = document.querySelector("p");
  var button = document.querySelector("button");
  para.addEventListener("mousedown", function() {
    console.log("Handler para el párrafo.");
  });
  button.addEventListener("mousedown", function(event) {
    console.log("Handler para el boton.");
    if (event.which == 3)
      event.stopPropagation();
  });
</script>

Ver Ejemplo

Al propagarse un evento, pueden ocurrir dos efectos.

  1. Burbuja: Primero lo escucha el elemento y luego sus antecesores.
  2. Capturador: Primero lo escucha sus antecesores y por ultimo el elemento.

Tipos de Propagación

Para poder utilizar el efecto burbuja, tenemos que pasar como tercer argumento de nuestra función addEventListener el valor booleano false.

<div>
  <p>Apreta aqui, tengo efecto burbuja.</p>
</div><br>
<script>
  var par = document.querySelector("p");
  var div = document.querySelector("div");
  par.addEventListener("click", function() {
      console.log("Presionanste sobre el elemento p");
  }, false);
  div.addEventListener("click", function() {
      console.log("Presionanste sobre el elemento div");
  }, false);
</script>

Ver Ejemplo

Para poder utilizar el efecto captura, tenemos que pasar como tercer argumento de nuestra función addEventListener el valor booleano true.

<div>
  <p>Apreta aqui, tengo efecto captura.</p>
</div><br>
<script>
  var par = document.querySelector("p");
  var div = document.querySelector("div");
  par.addEventListener("click", function() {
      alert("Presionanste sobre el elemento p");
  }, true);
  div.addEventListener("click", function() {
      alert("Presionanste sobre el elemento div");
  }, true);
</script>

Ver Ejemplo

Default

Algunos elementos HTML tienen acciones por defecto cuando el usuario interacciona con ellos. Una forma de prevenir este comportamiento es utilizando la funcion preventDefault definida sobre el Event Object

<a href="https://www.google.com.ar/">Ir a Google!</a>
<script>
  var link = document.querySelector("a");
  link.addEventListener("click", function(event) {
    console.log("De acá no te vas.");
    event.preventDefault();
  });
</script>

Ver Ejemplo

Eventos del Teclado

Cuando se presiona una tecla del teclado, el navegador dispara el evento keydown y cuando se la suelta dispara el evento keyup.

Un tercer evento llamado keypress es disparado si la tecla presionada genera algún carácter de entrada.

<p>El sitio se pondrá de color azul si se presiona la letra V.</p>
<script>
  addEventListener("keydown", function(event) {
    if (event.keyCode == 86)
      document.body.style.background = "blue";
  });
  addEventListener("keyup", function(event) {
    if (event.keyCode == 86)
      document.body.style.background = "";
  });
  addEventListener("keypress", function(event) {
    console.log(String.fromCharCode(event.charCode));
  });
</script>

Ver Ejemplo

Atajos

El Event Object contiene información de cuando las teclas Control, Alt y Shift están presionadas.

Dicha información esta contenida en los atributos ctrlKey, altKey y shiftKey del Event Object respectivamente.

<p>Presione Control + Space para continuar.</p>
<script>
  addEventListener("keydown", function(event) {
    if (event.keyCode == 32 && event.ctrlKey)
      console.log("Continuando!");
  });
</script>

Ver Ejemplo

Eventos del Mouse

Al presionar el botón izquierdo o central del mouse,

el navegador dispara los siguientes eventos:

  1. Un evento llamado mousedown.
  2. Un evento llamado mouseup.
  3. Un evento llamado click. 
<p>Usa el botón central o izquierdo!</p>
<button>Apretame</button>
<script>
  var button = document.querySelector("button");
  button.addEventListener("mousedown", function(event) {
    console.log("Primero ocurre el evento mousedown");
  });
  
  button.addEventListener("mouseup", function(event) {
    console.log("Segundo ocurre el evento mouseup");
  });
  button.addEventListener("click", function(event) {
    console.log("Y por ultimo ocurre el evento click");
  });
</script>

Ver Ejemplo

<style>
  body {
    height: 200px;
    background: beige;
  }
  .dot {
    height: 8px; width: 8px;
    border-radius: 4px;
    background: blue;
    position: absolute;
  }
</style>
<script>
  addEventListener("click", function(event) {
    var dot = document.createElement("div");
    dot.className = "dot";
    dot.style.left = (event.pageX - 4) + "px";
    dot.style.top = (event.pageY - 4) + "px";
    document.body.appendChild(dot);
  });
</script>
  • pageX: Distancia desde la izquierda
  • pageY: Distancia desde arriba

Ver Ejemplo

El Event Object de un evento del mouse trae las coordenadas que informan donde ocurrió el evento.

Movimientos del Mouse

El evento mousemove es disparado cuando el mouse se mueve dentro de nuestro DOM.

Ver Ejemplo

<style>
  div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
  }
</style>
<p>Mueve el mouse dentro de este div!</p>
<div></div>
<p id="coordenadas"></p>
<script>
  var div = document.querySelector("div");
  div.addEventListener("mousemove", function(event) {
    var coor = "Coordenadas: (" + event.clientX + "," + event.clientY + ")";
    document.getElementById("coordenadas").innerHTML = coor;
  });
</script>

Los evento mouseenter y mouseleave son disparados cuando posicionamos nuestro puntero sobre un elemento HTML y cuando abandonamos el mismo respectivamente.

Ver Ejemplo

<style>
  div#padre {
    padding-top: 50px;
    border: 1px solid black;
  }
  div#azul {
    height: 50px;
    background-color: blue;
  }
  div#verde {
    height: 50px;
    background-color: green;
  }
</style>
<div id="padre">
  <div id="azul"></div>
  <div id="verde"></div>
</div>
<p id="estado"></p>
<script>
  var div = document.getElementById("padre");
  div.addEventListener("mouseenter", function(event) {
    document.getElementById("estado").innerHTML = "Estoy dentro de "+event.target.id;
  }, true);
  div.addEventListener("mouseleave", function(event) {
    document.getElementById("estado").innerHTML = "";
  }, true);
</script>

Los eventos mouseover y mouseout son disparados cuando posicionamos nuestro puntero sobre un elemento HTML o uno de sus hijos y cuando abandonamos el mismo respectivamente.

Ver Ejemplo

<style>
  div#padre {
    padding-top: 50px;
    border: 1px solid black;
  }
  div#azul {
    height: 50px;
    background-color: blue;
  }
  div#verde {
    height: 50px;
    background-color: green;
  }
</style>
<div id="padre">
  <div id="azul"></div>
  <div id="verde"></div>
</div>
<p id="estado"></p>
<script>
  var div = document.getElementById("padre");
  div.addEventListener("mouseover", function(event) {
    document.getElementById("estado").innerHTML = "Estoy dentro de "+event.target.id;
  });
  div.addEventListener("mouseout", function(event) {
    document.getElementById("estado").innerHTML = "";
  });
</script>

Eventos de formularios

El evento change nos permite escuchar cuando el valor de un campo de un formulario cambio. Este evento es aplicable para campos del tipo input, select o textarea.

<form>
    <input type="text"></div>
</form>
<p id="estado"></p>
<script>
  var input = document.querySelector("input");
  input.addEventListener("change", function(event) {
    document.getElementById("estado").innerHTML = "Nuevo valor: "+event.target.value;
  });
</script>

Ver Ejemplo

Al intentar hacer foco  sobre un elemento HTML, el navegador dispara los siguientes eventos

<input type="text">
<script>
  var input = document.querySelector("input");
  input.addEventListener("focus", function(event) {
    input.style.background = "yellow";
  });
  input.addEventListener("blur", function(event) {
    input.style.background = "white";
  });
</script>

Estos eventos NO se propagan.

Ver Ejemplo

  1. focusin, indica que se esta haciendo foco
  2. focus, indica que ya se hizo foco
  3. focusout, indica que se esta perdiendo el foco
  4. blur, indica que ya se perdio el foco

Cuando enviamos un formulario, el navegador dispara un evento llamado submit.

Analogamente al intentar resetear un formulario, el navegador dispara el evento reset.

<form>
  Nombre: <input type="text">
  <input type="reset">
  <input type="submit">
</form>
<p id="status"><p>
<script>
  var form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    event.preventDefault()
    document.getElementById("status").innerHTML = "Formulario enviado...";
  });
  form.addEventListener("reset", function(event) {
    document.getElementById("status").innerHTML = "Formulario reseteado...";
  });
</script>

Ver Ejemplo

Eventos del Frame

Un evento especial, llamado load es disparado cuando nuestra pagina termina de cargar.

Cuando cerramos la ventana o bien presionamos algún link que nos cambie el contenido, se dispara un evento llamado beforeunload.

Ver Ejemplo

<p></p>
<a href="https://www.google.com.ar/">Ir a Google!</a>
<script>
    var para = document.querySelector("p");
    addEventListener("load", function (event) {
        para.innerHTML = 'Contenido que se carga al cargar todo el HTML...'
    });
    addEventListener("beforeunload", function (event) {
        event.returnValue = "Se va a perder todo lo que hiciste!!"
    });
</script>
<style>
  .progress {
    border: 1px solid blue;
    width: 100px;
    position: fixed;
    top: 10px; right: 10px;
  }
  .progress > div {
    height: 12px;
    background: blue;
    width: 0%;
  }
  body {
    height: 2000px;
  }
</style>
<div class="progress">
    <div></div>
</div>
<p>Scrolleame...</p>
<script>
  var bar = document.querySelector(".progress div");
  addEventListener("scroll", function() {
    var max = document.body.scrollHeight - innerHeight;
    var percent = (pageYOffset / max) * 100;
    bar.style.width = percent + "%";
  });
</script>

Ver Ejemplo

Al scrollear en nuestra ventana, el navegador dispara un evento llamado scroll.

Un evento similar ocurre si intentamos cambiar las dimensiones de la ventana del navegador, cuando esto ocurre, se dispara el evento resize.

<p id="estado">
  Cambie el tamaño de la pantalla
</p>
<script>
  addEventListener("resize", function(event) {
    var w = window.outerWidth;
    var h = window.outerHeight;
    var txt = "Tamaño de la pantalla: ancho=" + w + ", alto=" + h;
    document.getElementById("estado").innerHTML = txt;
  });
</script>

Ver Ejemplo

Eventos Customs

Se pueden crear nuevos eventos utilizando el constructor Event. 

var myEvent = new Event('message');

Podemos escucharlos de la misma manera que al resto de los eventos.

addEventListener('message', function (event) { ... });

Podemos disparar el evento utilizando el método dispatchEvent. 

elem.dispatchEvent(myEvent);

Ver Ejemplo

Podemos modificar los atributos de nuestro evento utilizando el constructor CustomEvent

var myEvent = new CustomEvent('message', { 'detail': "Esto es un mensaje" });
addEventListener('message', function (event) {
    console.log(event.detail)
});

Al hacer esto, cuando se dispare nuestro evento podemos obtener los atributos que nosotros definimos previamente.

Ver Ejemplo

Made with Slides.com