Skip to content

Latest commit

 

History

History
279 lines (238 loc) · 10.3 KB

dia18.md

File metadata and controls

279 lines (238 loc) · 10.3 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Master en Programación de Aplicaciones con JavaScript y Node.js

JS, Node.js, Frontend, Express, Patrones, IoT, HTML5_APIs, Asincronía, Websockets, ECMA6, ECMA7

Clase 18

Eventos

Funcionamiento:

Soporte

  • Podemos escuchar eventos y enlazar funciones (event handler) img_pro_bu

Demo

Propagación:

  • Capturing desde document hasta el elemento
  • Target impacta el elemento
  • Bubbling sube desde el elemento hasta document

Usando Eventos (clásico):

Solo una función por evento

	<button onclick="cambiarFondo()">Cambia el fondo</button>
	function cambiarFondo() {
		// color = 'rgb(0-255,0-255,0-255'
		var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
		color += Math.floor((Math.random() * 255)) + ',';
		color += Math.floor((Math.random() * 255)) + ')';
		document.body.style.backgroundColor= color;
		console.info("Nuevo color:", color);
	}

Usando Eventos (actualidad):

  • Usando Eventos (Callbacks)

    • Multiples funciones por evento
    • Necesidad de compatibilizar para IE8

  • Propiedades

     	// Callback - Manejador de Eventos
 	function manejadorEventos(elEvento) {
 	  	// Compatibilizar el evento
 	  	var evento = elEvento || window.event;
 	  	// Imprimir detalles
 	  	console.log("-----------------------------")
 	  	console.log("Type: "+evento.type); // Tipo
 	  	console.log("Bubbles: "+evento.bubbles);
 	  	console.log("Cancelable: "+evento.cancelable);
 	  	console.log("CurrentTarget: ", evento.currentTarget);
 		console.log("DefaultPrevented: "+evento.defaultPrevented);
 		console.log("EventPhase: "+evento.eventPhase);
 		console.log("Target: ", evento.target);
 		console.log("TimeStamp: "+evento.timeStamp);
 		console.log("IsTrusted: "+evento.isTrusted); // true - Usuario o false - Script
 		console.log("=============================")
 		// Desactivamos
 		if (document.removeEventListener){ 
 			document.removeEventListener('click', manejadorEventos);
 			console.info("Listener quitado con exito");
 		} else { // IE8
 			document.detachEvent('onclick', manejadorEventos);
 			console.info("Listener quitado con exito");
 		}
 	}
 	// Añadimos Listener
 	document.addEventListener('click', manejadorEventos);

  • Métodos:

    • .addEventListener() Añadir un evento a un elemento del DOM:
     document.body.addEventListener('click', function (e) {
     var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
     color += Math.floor((Math.random() * 255)) + ',';
     color += Math.floor((Math.random() * 255)) + ')';
     document.body.style.backgroundColor= color;
     console.info("Nuevo color:", color);
 });
    • .attachEvent() Añadir un evento a un elemento del DOM (<= IE8):
     document.attachEvent('onclick', function (e) {
     var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
     color += Math.floor((Math.random() * 255)) + ',';
     color += Math.floor((Math.random() * 255)) + ')';
     document.body.style.backgroundColor= color;
     console.info("Nuevo color:", color);
 });
    • .removeEventListener() Elimina un evento previamente añadido:
     function cambiarColor (){
     var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
     color += Math.floor((Math.random() * 255)) + ',';
     color += Math.floor((Math.random() * 255)) + ')';
     document.body.style.backgroundColor= color;
     console.info("Nuevo color:", color);
 }
 
 document.body.addEventListener('click', cambiarColor);
 document.body.removeEventListener('click', cambiarColor);
    • .detachEvent() Elimina un evento previamente añadido (<= IE8):
     function cambiarColor (){
     var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
     color += Math.floor((Math.random() * 255)) + ',';
     color += Math.floor((Math.random() * 255)) + ')';
     document.body.style.backgroundColor= color;
     console.info("Nuevo color:", color);
 }
 
 document.body.attachEvent('onclick', cambiarColor);
 document.body.detachEvent('onclick', cambiarColor);
    • .dispatchEvent() Lanza un evento manualmente:
     document.body.addEventListener('click', function (e) {
     var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
     color += Math.floor((Math.random() * 255)) + ',';
     color += Math.floor((Math.random() * 255)) + ')';
     document.body.style.backgroundColor= color;
     console.info("Nuevo color:", color);
 });
 
 var lanzadorEventos = new Event('click');
 document.body.dispatchEvent(lanzadorEventos);

Referencia de event.type:

  • Ratón

    • click Cuando... se hace click de ratón
    • dblclick Cuando... se hace doble click de ratón

  • Teclado

    • keydown Cuando... se presionó la tecla
    • keypress Cuando... se presiona la tecla
    • keyup Cuando... se deja de pulsar la tecla

  • Más eventos

Gestionando el flujo:

  • Deteniendo el flujo:

    • .preventDefault() evita el comportamiento por defecto (ex: Link -> nueva URL)
    • .stopPropagation() evita la propagación por el DOM (bubble) pero permite la acción por defecto.

  • Gestión de Eventos:

    • Gestión (asociar un evento por elemento)
     	<ul id="miNav">
 		 <li><a href="#nosotros">¿Quienes Somos?</a></li>
 		 <li><a href="#objetivos">Los objetivos</a></li>
 		 <li><a href="#equipo">Nuestro Equipo</a></li>
 		 <li><a href="#detalles">Más detalles</a></li>
 		 <li><a href="#contacta">Contactanos</a></li>
 	</ul>
        var miNav = document.getElementById("miNav");
    var miNavLinks = miNav.getElementsByTagName("a");
    for (var i = 0; i < miNavLinks.length; i++) {
      miNavLinks[i].onclick = function(){
         console.info(this.innerHTML);
      }
    }

  • Delegación de eventos:

    • Delegación (asociar un único evento al padre de los elementos)
     	<ul id="miNav">
 		 <li><a href="#nosotros">¿Quienes Somos?</a></li>
 		 <li><a href="#objetivos">Los objetivos</a></li>
 		 <li><a href="#equipo">Nuestro Equipo</a></li>
 		 <li><a href="#detalles">Más detalles</a></li>
 		 <li><a href="#contacta">Contactanos</a></li>
 	</ul>
        var miNav = document.getElementById("miNav");
    miNav.onclick = function(evento){
       var evento = evento || window.event;
       var elemento = evento.target || evento.srcElement;
       console.info(elemento.innerHTML);
    }

  • Creación de Eventos Personalizados

    • ejemplo:
     	var evento = new Event('miEventoInventado');
 	
 	document.body.addEventListener('miEventoInventado', function (e) {
 		console.info(e); // {isTrusted: false}
 	});
 	
 	document.body.dispatchEvent(evento);

Programación dirigida a eventos

La programación dirigida por eventos es un paradigma de programación en el que tanto la estructura como la ejecución de los programas van determinados por los sucesos que ocurran en el sistema, definidos por el usuario o que ellos mismos provoquen.

Para entender la programación dirigida por eventos, podemos oponerla a lo que no es: mientras en la programación secuencial (o estructurada) es el programador el que define cuál va a ser el flujo del programa, en la programación dirigida por eventos será el propio usuario —o lo que sea que esté accionando el programa— el que dirija el flujo del programa. Aunque en la programación secuencial puede haber intervención de un agente externo al programa, estas intervenciones ocurrirán cuando el programador lo haya determinado, y no en cualquier momento como puede ser en el caso de la programación dirigida por eventos. Wikiwand

  • Ejemplo: 
     	var eventos = {
 		agregar: null,
 		quitar: null,
 		manejador: function(evento) {
 	        console.group("Manejador de Eventos");
 		        console.log("-----------------------------");
 	            console.log("Type: " + evento.type); // Tipo
 	            console.log("Bubbles: " + evento.bubbles); // sube por el DOM
 	            console.log("Cancelable: " + evento.cancelable);
 	            console.log("CurrentTarget: ", evento.currentTarget);
 	            console.log("DefaultPrevented: " + evento.defaultPrevented);
 	            console.log("EventPhase: " + evento.eventPhase);
 	            console.log("Target: ", evento.target);
 	            console.log("TimeStamp: " + evento.timeStamp);
 	            console.log("IsTrusted: " + evento.isTrusted); // true - Usuario o false - Script
 	            console.log("=============================");
 	        console.groupEnd();
 	    }
 	}
 	
 	// Init-time branching (Patrón)
 	if (typeof window.addEventListener === 'function') {
 	    eventos.agregar = function(el, type, fn) {
 	    	el.addEventListener(type, fn, false);
 		};
 	    eventos.quitar = function(el, type, fn) {
 	    	el.removeEventListener(type, fn, false);
 	    };
 	} else { // Soporte para IE8
 	    eventos.agregar = function(el, type, fn) {
 	        el.attachEvent('on' + type, fn);
 	    };
 	    eventos.quitar = function(el, type, fn) {
 	        el.detachEvent('on' + type, fn);
 	    };
 	}
 	
 	eventos.agregar(document.body, 'click', function (e) {
 		var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
 		color += Math.floor((Math.random() * 255)) + ',';
 		color += Math.floor((Math.random() * 255)) + ')';
 		document.body.style.backgroundColor= color;
 		console.info("Nuevo color:", color);
 	})

Ejercicios

1 - Realiza una pagina web que muestre la cuenta atrás para terminar el master en días, horas, minutos y segundos. Objetivos Adicionales:

  • Además debería de seguir actualizando la cuenta atrás de manera dinámica.
  • Los datos horarios siempre deben mostrarse con dos dígitos, añadiendo un cero a la izquierda cuando sea necesario.

Solucion