Eventos JavaScript

Eventos

Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).

Aquí una tabla de eventos

 

Manejadores de eventos

Podemos indicarle a nuestro evento que realice determinado proceso, estos pueden dividirse

Manejadores de evento como atributos

en el evento a aplicarse  podemos  indicarle directamente en el HTML

Manejadores de eventos como funciones

Si se realizan aplicaciones complejas, debemos agrupar el código JavaScript en una función:

Ejemplo 1

Ejemplo 2: en este caso con el elemento button del HTML5

 

Uso del AddeventListener

Otra forma de manejar eventos es haciendo uso de Listener para ello utilizamos la función addEventListener.

Esta técnica permite separar el código HTML del Javascript con lo cual es más sencillo dar mantenimiento al código, la sintaxis sería:

document.getElementById(«botoncito»).addEventListener(«evento», función, bool)

Donde:

«evento» es el nombre del evento sin el prefijo on,

función, es el nombre de la función cuando se ejecuta el evento,

bool, indica si el evento de captura esta antes o después, estos son: (true) o  (false),

Caso 1: en el HTML establecemos

y en el JavaScript establecemos

Caso 2:

en el JavaScript llamamos a la función

Los parámetros necesarios son los 2 primeros

Caso 3:

Se aplica cuando utilizamos el tercer elemento del addEventListener, en el ejemplo tenemos dos ID

Ahora que pasaría si en el último parámetro establecemos el false, por defecto JavaScript entiende que primero deberá desarrollarse de adentro hacia afuera

Pero si cambiamos el orden y al primero le ponemos true, notaremos la diferencia

Aquí presento una tabla de eventos para trabajarlo con el AddeventListener

 

Más información aquí

Funciones Base

Otra manera de llamar a un determinado elemento sería:

querySelector:

Retorna el primer elemento que cumpla con el criterio dado. Puede ser invocada sobre el document o sobre algún elemento. En caso de usarse sobre un elemento, las búsqueda se limita a los hijos de ese elemento.

Si la búsqueda no encuentra nada, retorna null.

querySelectorAll

Retorna todos los elementos que cumplan con el criterio dado. Al igual que querySelector puede ser invocada sobre el document o sobre algún elemento. Siempre retorna un NodeList, el cual no es una array con todas las de la ley (map, reduce, indexOf, etc), pero pude convertirse en uno, con facilidad.

Array.prototype.slice.call(document.querySelectorAll("div"))

Si no encuentra elementos que cumplan el criterio, retorna un NodeList sin elementos, nunca retorna null.

Funciones especializadas

getElementById

Retorna el primer elemento con el id especificado, es en muchos sentidos equivalente a hacer, querySelector('#elId'). Osea que retorna null si no hay elementos con dicho Id.

getElementByTagName

Retorna todos los elementos cuyo con el nombre de tag especificado, es en muchos sentidos equivalente a hacer, querySelectorAll('div') (si buscaras <div/>). Osea que retorna un NodeList vacío si no hay nada que cumpla las condiciones.

Por ultimo, existe este otro.

getElementByClassName

Retorna todos los elementos que mencionen la clase especificada, es en muchos sentidos equivalente a hacer, querySelectorAll('.clase'). Tambien retorna un NodeList, mismas reglas.

Practicas

Slider

Podemos aplicar de la siguiente manera

Ocultar / Mostrar contenido

Para aplicar esta práctica, primeramente insertamos un menu de opciones

Ahora establecemos el lugar donde se insertarán los elementos

En nuestro JavaScript establecemos:

 

Animaciones

Podemos insertar los iconos de las Redes Sociales

nuestros efectos serian:

encima:

fuera:

evento con el enlace

 

Efecto Hover

Insertamos los DIV´s

en la hoja de estilos ocultamos los contenidos

Aplicamos funcion Ocultar y Mostrar