Clase 12

Eventos

Funcionamiento:

Soporte

Podemos escuchar eventos y enlazar funciones (event handler)

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);
 	})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dia12.md

dia12.md

Clase 12

Eventos

Programación dirigida a eventos

Files

dia12.md

Latest commit

History

dia12.md

File metadata and controls

Clase 12

Eventos

Programación dirigida a eventos