jmocana.eu

Maquetador web

contactar

Manejo de eventos en javaScript

0 Comentarios

Jun01

Después de una temporadita haciendo uso de la librería jQuery he olvidado algunos conceptos básicos de javaScript por lo que empezaré una serie de posts tratando alguno de estos conceptos a modo de recordatorio personal, si además le sirve a alguien más pues mejor que mejor.

Como refleja el título del post empezaré abordando el manejo de los eventos. Es importante a la hora de asignar los eventos separar el código js del HTML por motivos de accesibilidad.

<a href="javascript:window.open()">Abrete sésamo</a> <!-- javaScript intrusivo -->

Para evitar tener javaScript intrusivo en nuestra página empezaremos por apoyarnos en la función de Simon Willison addLoadEvent. Esta función nos permitirá cargar varias funciones una vez la página se haya cargado, además funcionará correctamente en el caso de que el evento onload haya sido asignado previamente.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
   //funcionabilidad
});

Por otro lado haremos uso de dos funciones para añadir y borrar los eventos que queramos: “anadeEvento” y “borrarEvento”. Pasaremos como parámetros de las funciones el elemento al que queremos asignar el evento, el evento y la función que queremos ejecutar.


function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }
  
  function borrarEvento(elemento,evento,funcion) {
	   if(document.removeEventListener){
		   elemento.removeEventListener(evento, funcion, false);  // Resto navegadores
	   }
	   else{
		   elemento.detachEvent("on"+evento,  funcion ); // IE8-
	   }
  }

Como podéis ver en el código hay que realizar funcionabilidades distintas dependiendo del navegador. Para Internet Explorer 8 o inferior hacemos uso del método attachEvent mientras que para el resto de navegadores usamos addEventListener. A la hora de borrar eventos IE hace uso de detachEvent y el resto utiliza removeEventListener

Voy a realizar un ejemplo sencillo a modo de prueba en el que tendremos un botón con el típico alert “hola mundo” y otro botón que será el encargado de anular el evento que hace saltar el mensaje.

hola mundo! borrar

A continuación os dejo el código al completo:


function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
	function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }
  
  function borrarEvento(elemento,evento,funcion) {
	   if(document.removeEventListener){
		   elemento.removeEventListener(evento, funcion, false);  // Resto navegadores
	   }
	   else{
		   elemento.detachEvent("on"+evento,  funcion ); // IE8-
	   }
  }
  
  function holaMundo(){
	alert("hola mundo");
	return false;
  }
  
  function borrarMsj(){
	  alert("borrando...")
	  borrarEvento(enlace, "click", holaMundo);
  }				  
					  
   var enlace = document.getElementById("enlace1");
   var borrar = document.getElementById("enlace2");
   
   anadeEvento(enlace, "click", holaMundo);
   anadeEvento(borrar, "click", borrarMsj);   
});

Comentarios