Problema con "this" en IE

1984 · #1 (**permalink**) 22/08/2010, 03:10

Hola a todos,

Me he encontrado con un problema con el que no contaba.

Tengo un formulario al que le aplico AJAX y funciona perfectamente tanto en firefox como en opera y Chrome. Fue entonces cuando llegó la hora de probarlo con los explorer y comprobé que no funcionaba.

Tras diversas intentonas, me he dado cuenta que Explorer no interpreta bien (o al menos como yo creía que deberia interpretarse) la keyword "this".

Os pego una función externa como ejemplo que cargo al final de la página y que he simplificado al máximo:

Código:

function prueba() {
	var texto = this.value;
	alert(texto);
}
window.onload = document.getElementsByTagName ("input")[0].attachEvent("onkeyup", prueba);

En lugar de devolverme el valor del input (tiene uno asignado en el html) cuando pulso una tecla, me devuelve su valor como "undefined".

¿Alguien sabe a que se debe?

Panino5001 · #2 (**permalink**) 22/08/2010, 05:07

Tenés algunas cosas mal, aparte de lo que mencionás. Cuando usás los eventos como método (ejemplo, lo que usás en window.onload) el intérprete espera una referencia a una función a ejecutar. Es decir, espera o bien un nombre de función sin paréntesis o una función anónima. Vos usaste una instrucción y eso está mal.
Lo otro, lo que mencionás de this y explorer, es así cómo se maneja explorer. Para explorer ese this, usado en ese contexto, apunta al objeto window y no al objeto sobre el cual se produce el evento. Hay varias maneras de solucionarlo. Te dejo un ejemplo:

Código PHP:

  <!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&#237;tulo</title>
<script>
function addEvent(obj,fun,type){ 
    if(obj.addEventListener){ 
        obj.addEventListener(type,fun,false); 
    }else if(obj.attachEvent){ 
        var f=function(){ 
            fun.call(obj,window.event); 
        } 
        obj.attachEvent('on'+type,f); 
        obj[fun.toString()+type]=f; 
    }else{ 
        obj['on'+type]=fun; 
    } 
}  
function prueba() {
    var texto = this.value;
    alert(texto);
}
window.onload =function(){addEvent(document.getElementsByTagName("input")[0],prueba,'keyup');};
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="textfield" type="text" id="textfield" value="hola" />
</form>
</body>
</html>

1984 · #3 (**permalink**) 23/08/2010, 11:29

Joder qué grande eres Panino5001. Me acabas de resolver de un plumazo todas las funciones javascript que tengo y que no me funcionaban en las distintas versiones de explorer.

Efectivamente, y no me di cuenta, el ejemplo que te puse no era correcto. En mis páginas lo que hago es ir creando un array de funciones y aplicarlo al final con un simple "window.onload = lanzadera;".

Para manejar los eventos empleaba este script, y por eso me daba fallo:

Código:

function listen(event, elem, func) {
    if (elem.addEventListener)  // W3C DOM
        elem.addEventListener(event,func,false);
    else if (elem.attachEvent) { // IE DOM
         var r = elem.attachEvent("on"+event, func);
	return r;
    }
    else throw 'No es posible añadir evento';
}

Mil y un gracias.