Foros del Web - Ver Mensaje Individual

emprear · #6 (**permalink**) 25/02/2013, 07:16

Te pongo dos ejemplos del uso de addEventListener

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function mostrar_titulo(t){
alert('title="'+ t.title + '"  href=' + t.href);
}
 
window.onload = function(){
var linksmenu = [];
var contiene_links = document.getElementById('menu');
linksmenu = contiene_links.getElementsByTagName('a');   
    for (i=0; i<linksmenu.length; i++) {
        if (linksmenu[i].addEventListener){
        linksmenu[i].addEventListener("mouseover", function(){mostrar_titulo(this)}, false);
        }else{ // <IE9
            if (linksmenu[i].attachEvent){
            linksmenu[i].attachEvent ("onmouseover", function () {mostrar_titulo(this)});
        }   
        }
    }
}
//]]>
</script>
</head>
<body>
<div id="menu">
<a href="a.html" title="titulo a">a</a><br />
<a href="b.html" title="titulo b">b</a><br />
<a href="c.html" title="titulo c">c</a><br />
</div>
</body>
</html>

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit disabled</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
//<![CDATA[
// Definimos los campos que se han de verificar, contruimos un array con los id de los mismos
var campos = ["campo1", "campo2", "campo3", "campo4"];
function activar() {
var c = 0;
for(var i in campos){
i = parseInt(i);
var cadenaL = document.getElementById(campos[i]).value;
// hacemos un trim previo a la verificación
cadenaL = cadenaL.replace(/^\s+/g,'').replace(/\s+$/g,'')
if(cadenaL != ""){
c++; // incrementamos c por cada campo que no está vacío
}
if(c == (i+1)){ // si c es = al total de los campos habilitamos el submit
document.getElementById('envia').disabled = false;
}else{
document.getElementById('envia').disabled = true;
}
}
}
 
// agregamos el evento onkeyup dinamicamente a los campos requeridos
window.onload = function(){
    for(var e in campos){
    var elem = document.getElementById(campos[e])
    if (elem.addEventListener){
    elem.addEventListener("keyup", function(){activar()}, false);
    }else{ // <IE9
        if (elem.attachEvent){
        elem.attachEvent ("onkeyup", function () {activar(elem)});
        }
    }
    }
}
 
//]]>
</script>
</head>
<body>
<form action="#" method="post">
<input type="text" id="campo1" value="" /><br />
<input type="text" id="campo2" value="" /><br />
<input type="text" id="campo3" value="" /><br />
<input type="text" id="campo4" value="" /><br />
<input type="submit" id="envia" name="envia" value="procesar" disabled="disabled"/><br />
</form>
</body>
</html>

Como ves, efectivamente, como los eventos se àgregan en la carga de la página, uso window.onload para identificar los elemento y agregar el evento.

Mi sugerencia primera es que reemplace tus funciones

Código:

function manejaGU(){
        initReq("POST","profesorGestionaUsuarios.php",true);
    }
    function manejaGE(){
        initReq("POST","profesorGestionaExamenes.php",true);
    }
    function manejaVE(){
        initReq("POST","profesorVisualizaEstadisticas.php",true);
    }

por

Código:

function manejaGU(){
        alert('usuarios');
    }
    function manejaGE(){
       alert('examenes');
    }
    function manejaVE(){
      alert('estadisticas');
    }

Una vez que te asegures que los eventos se agregan en cada boton para la función que le corresponde, analices como está trabajando initReq, que aparentemente está utilizando Ajax, pero a decir verdad no entiendo como es que la usas, en un principio si lo único que cambia es la url por que pasar tres variables.
Además te aclaro que si podés pasar variables con addEventListener por lo que directamente podrias invocar a initReq(url) en forma directa
Ejemplo de addEventListener con parámetro a la función

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>addEvent + variable</title>
 
<style>
td{
cursor: pointer;
}
</style>
 
<script>
 
// cambiatexto de id=dos
function cambiatexto(nuevotexto) {
  var dos = document.getElementById("dos");
  dos.firstChild.nodeValue = nuevotexto;   
}
  
// agregar Evento a tabla
function iniciarEvento() {
  var el = document.getElementById("tabla");
  el.addEventListener("click", function(){cambiatexto("hola")}, false); // pasas un parámetro
}
</script>
 
</head>
<body onload="iniciarEvento();">
 
<table id="tabla">
  <tr><td id="uno">uno</td></tr>
  <tr><td id="dos">dos</td></tr>
</table>
 
</body>
</html>

SAludos