Método y/u objeto de origen

Dude-- · #1 (**permalink**) 06/04/2009, 14:51

1. ¿Es posible saber de que método proviene una llamada a una función?
2. ¿y desde que objeto ( id ) se ha realizado dicha llamada?
3. ¿Hay alguna forma de obtener un objeto mediante DOM por su name y no por su id? (es decir, un equivalente a "getElementById")

Panino5001 · #2 (**permalink**) 06/04/2009, 14:58

Ninguna de tus preguntas está relacionada con AJAX, sino con javascript.
La respuesta a las 2 primeras es relativa y depende del contexto al que te refieras y a cómo estén definidos los objetos.
La última: document.getElementsByName entrega una colección de items con el mismo name.

Dude-- · #3 (**permalink**) 06/04/2009, 15:06

Cita:

Iniciado por Panino5001

Ninguna de tus preguntas está relacionada con AJAX.
La respuesta a las 2 primeras es relativa y depende del contexto al que te refieras y a cómo estén definidos los objetos.
La última: document.getElementsByName entrega una colección de items con el mismo name.

Gracias por la respuesta Panino5001, pensaba que DOM se podría englobar en esta sección o en la de javascript, ya que no vi ninguna sección del foro más apropiada ¿dónde sería correcto plantear mis dudas?

Por cierto, si utilizo document.getElementsByName("miobjeto").value = "algo"; no funciona, sin embargo con getElementByID... y definiendo "id" si va.

Panino5001 · #4 (**permalink**) 06/04/2009, 15:36

Mejor ubicarla en javascript.
getElementsByName devuelve una colección de objetos, es decir, para acceder a uno hay que conocer su ubicación y usarla como índice:

Código PHP:

  document.getElementsByName('algo')[0].propiedad;

ó

Código PHP:

  document.getElementsByName('algo').item(0).propiedad;

Dude-- · #5 (**permalink**) 06/04/2009, 15:39

1. ¿Es posible saber de que método proviene una llamada a una función?
2. ¿y desde que objeto ( id ) se ha realizado dicha llamada?
------------------------------------------------------------------------
3. He visto que en algunas webs llaman funciones sin usar los métodos clásicos (onclick, etc...) tipo la imagen que aparece en la búsqueda de google que aparece arriba en estos foros ¿cómo lo consiguen?

Dude-- · #6 (**permalink**) 06/04/2009, 15:45

¿Y como puedo conocer su ubicación? ¿acaso hay que recorrer el array que devuelva GetElementByName elemento a elemento hasta encontrarlo para saber su índice?

GatorV · #7 (**permalink**) 06/04/2009, 15:47

Tema trasladado desde AJAX.

caricatos · #8 (**permalink**) 06/04/2009, 15:50

Hola:

Una función, en POO es un método... y onclick, onsubmit, etc. son manejadores de eventos (los ebentos son los que están detrás del "on" (click, submit...)

Resumiendo, todos los métodos son llamados/ejecutados por eventos, aunque esos eventos pueden asignarse inline (<body onload="cargar()" >), o pueden asignarse desde cualquier método o función... (window.onload = cargar;)

También pueden temporizarse, pero siempre existe algún evento.

Saludos

Panino5001 · #9 (**permalink**) 06/04/2009, 17:22

Quizá podríamos ayudarte mejor si colocaras el código de un ejemplo concreto y nos dijeras qué es lo que querés obtener.

Dude-- · #10 (**permalink**) 06/04/2009, 22:59

Código:

<script type="text/javascript">
function textbox(ident,x)
{
	switch(x)
	{
		case "in": 
		{
			if ( ident == "email"){document.getElementById(ident).value = ""; break;}
			if ( ident == "pass") {document.getElementById(ident).value = ""; document.getElementById(ident).type = "password"; break;}
		}
		case "out": 
		{
			if ( ident == "email" && document.getElementById(ident).value == ""){document.getElementById(ident).value = "aqui_tu@email"; break;}
			if ( ident == "pass")
			{ 
				var y = document.getElementById(ident).value;
				if ( y == ""){document.getElementById(ident).type = "text"; document.getElementById(ident).value = "aqui tu contraseña"; break;}
			}
		}
}
</script>
<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
	<label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="tu@email" size="20" onfocus="textbox('email','in')" onblur="textbox('email','out')"  /></label>
	<label>Contraseña:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10"  onfocus="textbox('pass','in')" onblur="textbox('pass',out')" /></label>
	<label><input  type="checkbox" name="autologin" />Guardar</label>
	<input type="submit" value="OK" /> 
</form>

Como se puede observar la función se llama desde el formulario mediante los eventos onfocus y onblur, si pudiera identificar desde que input se esta produciendo el evento no tendría que pasarle el parámetro "ident" a la función y si supiera que evento ha llamado a la función tampoco tendría que pasarle el parámetro "in" u "out".

Respecto a la duda de seleccionar un elemento mediante el getElementName es para prescindir del uso del atributo "id" en los "input". Pero no se como localizarlo, tal y como comentó Panino5001, para poder llamarlo por su índice.

A parte de esas dudas, encontré y modifique un poco el código de la barra de google de este foro para intentar comprenderlo:

Código:

<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
	<label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20"  /></label>
	<label>Contraseña:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10"  /></label>
	<label><input  type="checkbox" name="autologin" />Guardar</label>
	<input type="submit" value="OK" /> 
</form>

<script>
(
	function()
	{
		var elemento = document.getElementById("email");
		elemento.onfocus = function(){elemento.type = "password";};
		elemento.onblur = function(){elemento.type = "text"; };
	}
)
();
</script>

Y tengo varias dudas al respecto:
1. ¿Por qué este script no lleva declarado el atributo type="text/javascript"?
2. ¿Por qué si coloco el <script> antes del <form> no funciona?
3. ¿Por qué la función esta englobada en paréntesis y después hay un "();"? ¿es acaso la forma de autollamar a la función?
4. ¿Hay alguna forma de hacer el codigo siguiente sin utilizar funtion()?

Código:

elemento.onfocus = function(){elemento.type = "password";};

Es decir, algo tipo:
elemento.onfocus = (elemento.type = "password";)
o bien:
if ( elemento.onfocus )
{elemento.type = "password";}

David · #11 (**permalink**) 06/04/2009, 23:35

1) Los navegadores lo interpretan igual, pero el atributo type es obligatorio según la recomendación de la W3C.
2) Porque en ese momento los elementos a los que tratas de acceder a ún no fueron creados.
3) Sí, la función se llama a sí misma.
4) ¿Por qué necesitas hacerlo sin usar function?

Dude-- · #12 (**permalink**) 06/04/2009, 23:47

Cita:

Iniciado por David el Grande

1) Los navegadores lo interpretan igual, pero el atributo type es obligatorio según la recomendación de la W3C.
2) Porque en ese momento los elementos a los que tratas de acceder a ún no fueron creados.
3) Sí, la función se llama a sí misma.
4) ¿Por qué necesitas hacerlo sin usar function?

3) ¿Y que se llama una sola vez o repetidamente una vez tras otra? no entiendo como es capaz de capturar los eventos si solo se autollama una vez.
4) Pues porque me pareció muy extraño utilizar una función para, algo supuestamente sencillo como es declarar un valor para el atributo de un objeto, y supuse que debía haber otra forma de hacerlo más coherente, por eso lo pregunto.

David · #13 (**permalink**) 06/04/2009, 23:50

En realidad, de la forma como está es más coherente. Esa función se llama cada vez que se ejecuta ese evento, Si colocas:

Código javascript:

Ver originalelemento.onfocus = funcion;
function funcion() {
    alert("onfocus event");
}

Aparecerá ese mensaje "onfocus event" cada vez que el campo recibe el foco.

Dude-- · #14 (**permalink**) 07/04/2009, 00:51

Para moderadores: dupliqué el post sin querer, edito este, borradlo si os parece bien.
Para el resto: continuar leyendo el siguiente.

Dude-- · #15 (**permalink**) 07/04/2009, 00:52

Cita:

Iniciado por David el Grande

En realidad, de la forma como está es más coherente. Esa función se llama cada vez que se ejecuta ese evento, Si colocas:

Y las formas que sugiero son posibles o existe algo equivalente? gracias.

PD: Aprovecho para recordar que me quedaron varias dudas:

Cita:

Como se puede observar la función (ver código en post anteriores) se llama desde el formulario mediante los eventos onfocus y onblur, si pudiera identificar desde que input se esta produciendo el evento no tendría que pasarle el parámetro "ident" a la función y si supiera que evento ha llamado a la función tampoco tendría que pasarle el parámetro "in" u "out".

Respecto a la duda de seleccionar un elemento mediante el getElementName es para prescindir del uso del atributo "id" en los "input". Pero no se como localizarlo, tal y como comentó Panino5001, para poder llamarlo por su índice.

Panino5001 · #16 (**permalink**) 07/04/2009, 04:38

Quizá te sirva tomar la información a partir del objeto event:

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=utf-8" />

<title>Documento sin t&iacute;tulo</title>

<script>

function testear(e){

    var obj=e.srcElement || e.target;

    alert('evento: '+e.type+'--name del objeto: '+obj.name)

}

</script>

</head>

 
<body>

<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">

    <label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20" onfocus="testear(event)"  /></label>

    <label>Contraseña:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10" onchange="testear(event)"  /></label>

    <label><input  type="checkbox" name="autologin" onclick="testear(event)" />Guardar</label>

    <input type="submit" value="OK" /> 

</form>

 
</body>

</html>

Dude-- · #17 (**permalink**) 07/04/2009, 05:17

Funciona bien el código que has proporcionado ¿podrías explicarme la siguiente línea?

Código:

var obj=e.srcElement || e.target;

Tal y como la leo parece significar que se declara una variable cuyo nombre es "obj" que adquiere el valor de event.srcElement "o" event.target, no entiendo porque no es simplemente:

var obj=e.target;

Tampoco entiendo porque si modifico el input, cambiando onfocus por onclick y añadiendo a su vez onblur tal que así:

Código:

<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20" onclick="testear(event)"  onblur="testear(event)"  />

Me saltan dos alerts al hacer click en el campo de texto, primero el de onblur y luego el de onclick, cuando no se ha producido el primero, por lo que solo debería aparecer el segundo.

Panino5001 · #18 (**permalink**) 07/04/2009, 06:04

e. target || e.srcElement se debe a que Explorer posee su propio estandar, que es diferente del resto de los navegadores (el estandar es la propiedad target, que no es reconocida por Explorer).
Te recomiendo que leas http://kusor.net/traducciones/brainj...vents1.es.html
Y cuando ponés el foco sobre un objeto se produce más de un evento (quizá esto también te quede más claro luego de leer el enlace anterior)

Dude-- · #19 (**permalink**) 07/04/2009, 10:33

Cita:

Iniciado por Panino5001

e. target || e.srcElement se debe a que Explorer posee su propio estandar, que es diferente del resto de los navegadores (el estandar es la propiedad target, que no es reconocida por Explorer).
Te recomiendo que leas http://kusor.net/traducciones/brainj...vents1.es.html
Y cuando ponés el foco sobre un objeto se produce más de un evento (quizá esto también te quede más claro luego de leer el enlace anterior)

Es muy interesante ese documento, gracias. Pero sigo sin entender porque al tener en un input onfocus y onblur me dispara los dos al hacer click en el elemento, en teoría no hay burbujeo posible que disparase el onblur ¿o si?

David · #20 (**permalink**) 07/04/2009, 10:48

No entendí tu última pregunta Dude--.

Lo que sucede es que al pasar el foco a otro elemento, se dispara el evento onblur del ememento que perdió el foco, luego, el evento onfocus del que lo recibe.

Panino5001 · #21 (**permalink**) 07/04/2009, 10:52

Pasa que en el momento en que se dispara el primer alert se pierde el foco (es el propio alert lo que hace que se pierda el foco). Podés comprobar que sucede algo semejante, pero quizá más notorio, si en lugar de onclick usás onkeypress, por ejemplo.

Dude-- · #22 (**permalink**) 07/04/2009, 11:02

David el Grande: Es que yo pensaba que se disparaba el onblur como consecuencia del onfocus, sin tener en cuenta el alert.

No había reparado en los alerts. Debe ser que estaba demasiado concentrado en los input y no fui capaz de abstraerme un poco del problema. Gracias una vez más Panino.

Lo que es gracioso que el primer alert marque en su mensaje el onblur, cuando en teoría el primer evento registrado debería ser, siguiendo este diagrama:
click en el textbox -> onfocus del textbox
esto provoca el alert -> onblur del textbox

onfocus y no onblur :/

Panino5001 · #23 (**permalink**) 07/04/2009, 11:08

El orden es todo un tema. Durante un onclick se producen varios eventos: mousedown, mouseover, mouseup, click, por ejemplo, y diferentes navegadores registran de manera diferente el orden en que se producen esos eventos.

Dude-- · #24 (**permalink**) 07/04/2009, 11:37

Cita:

Iniciado por Panino5001

El orden es todo un tema. Durante un onclick se producen varios eventos: mousedown, mouseover, mouseup, click, por ejemplo, y diferentes navegadores registran de manera diferente el orden en que se producen esos eventos.

Ya podían aplicarse un poquito en los standares... tendremos que castigar a los cutrebrowsers para que vayan tomando nota.

Dude-- · #25 (**permalink**) 08/04/2009, 02:40

¿Por qué esto no funciona?

Código javascript:

Ver original<script>
function testear(e){
    var obj=e.srcElement || e.target;
    var objeto = obj.name;
    var evento = e.type;
    objeto.evento = function(){document.write("hola");};    
}
</script>
 
<body>
<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20" onfocus="testear(event)" onblur="testear(event)"  /></label>
    <label>Contraseña:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10" onchange="testear(event)"  /></label>
    <label><input  type="checkbox" name="autologin" onclick="testear(event)" />Guardar</label>
    <input type="submit" value="OK" /> 
</form>
</body>

Y sin embargo si no llamo a ninguna función si va:

Código javascript:

Ver originalobjeto.evento = document.write("hola");

#26 (**permalink**) 08/04/2009, 02:57

No sé qué es lo que intentas hacer con ese código, pero lo que realmente haces, no tiene sentido. En ninguno de los dos casos, ni con función ni sin ella.

Código javascript:

Ver originalfunction testear(e){
    // Guardamos en obj el elemento sobre el que se produjo el evento:
    var obj=e.srcElement || e.target;
    // Guardamos el nombre de ese elemento en una variable llamada objeto.
    // Objeto es algo como "email".
    var objeto = obj.name;
    // Guardamos en una variable llamada evento el tipo de evento ocurrido
    var evento = e.type;
    // Ahora, a la variable objeto (que tenía de valor la cadena "email")
    // le añadimos una propiedad llamada "evento" y le asignamos una
    // función que escribe "hola" en el document.
    // Es interesante notar que sólo asignamos esa función, no la llamamos
    // ni nada. Y que se la asignamos a una variable llamada objeto,
    // no a ningún elemento real del DOM ni nada similar.
    // También es interesante notar que le añadimos una propiedad
    // llamada "evento" así tal cual; no tiene ninguna relación
    // con la variable evento anterior.
    objeto.evento = function(){document.write("hola");};
    // Salimos de la función, y las variables obj, objeto, evento se destruyen.
    // Como no hemos hecho nada con ellas,
    // la función no tiene ningún efecto, no hace nada.
}

En el caso de poner objeto.evento = document.write("hola") lo único que cambia es que estamos llamando directamente a que escriba "hola" en el documento. Esto es casi peor que lo anterior, porque, por un lado seguimos sin asignar nada a objeto.evento (si es que realmente queremos asignarle algo) y por otra parte nos estamos cargando el document, sobreescribiéndolo con "hola".

Así que me pregunto, Dude--, ¿qué es lo que estás intentando hacer?

Dude-- · #27 (**permalink**) 08/04/2009, 03:36

mmm lo que intento hacer es una función que reconozca que evento se ha producido y que objeto lo ha lanzado y desde ahí hacer cambios en la estructura mediante dom.

En mi código inicial, ya que ese era para ver porque no funciona, en vez de:

Código javascript:

Ver originaldocument.write("hola")

tenía puesto:

Código javascript:

Ver originaldocument.getElementById(objeto).value = "focus";

para comprobar que funcionaba se supone que esto debería cambiar el value del textbox e indicar el evento. Claro que como no puedo poner directamente:

Código javascript:

Ver originalobjeto.evento = document.getElementById(objeto).value = "focus";

pues utilizaba la funcion:

Código javascript:

Ver originalobjeto.evento = function() {document.getElementById(objeto).value = "focus";}

El motivo por el que declaro las variables objeto y evento es porque no me funcionaba si ponía algo como esto en mis pruebas:

Código javascript:

Ver originalobj.name.e.type = document.write("loquesea");

Y respecto a lo que comentas de que solo asigno la función que no la llamo ni nada, te dejo el código original que sigo de ejemplo:

Código javascript:

Ver original<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20"  /></label>
    <label>Contrase&#241;a:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10"  /></label>
    <label><input  type="checkbox" name="autologin" />Guardar</label>
    <input type="submit" value="OK" /> 
</form>
 
<script>
(
    function()
    {
        var elemento = document.getElementById("email");
        elemento.onfocus = function(){elemento.type = "password";};
        elemento.onblur = function(){elemento.type = "text"; };
    }
)
();
</script>

Cita:

venkman
Es interesante notar que sólo asignamos esa función, no la llamamos ni nada. Y que se la asignamos a una variable llamada objeto, no a ningún elemento real del DOM ni nada similar.

Supongo que con esto te refieres a que la declaración de "objeto" debería ser esta:

Código javascript:

Ver originalvar objeto = document.getElementById(obj.name);

Y que debería utilizar algo así para usar el evento:

Código javascript:

Ver originalif ( evento != "" )
    {objeto.value = evento;}

Dude-- · #28 (**permalink**) 08/04/2009, 04:24

Bueno hice algunas modificaciones y ahora el código funciona CASI (leer después del código) correctamente:

Código javascript:

Ver original<script type="text/javascript">
        function checkevent(e)
        {
            var obj=e.srcElement || e.target;
            var objeto = document.getElementById(obj.name);
            var evento = e.type;
            
            if ( obj.name == "email" )
            {
                if(evento == "focus" && objeto.value == "[email protected]")
                { objeto.value = ""; }
                if(evento == "blur" && objeto.value == "" )
                { objeto.value = "[email protected]"; }
            }
            
            if ( obj.name == "pass" )
            {
                if(evento == "focus" && objeto.value == "su contraseña")
                { objeto.value = ""; objeto.type = "password"; }
                if(evento == "blur" && objeto.value == "")
                { objeto.value = "su contraseña"; objeto.type = "text"; }
            }
    
        }
    </script>

Pero hay dos problemas:
1. En IE no cambia el tipo en objeto.type = "password" dice que no reconoce "type"...
2. En Opera y Chrome al hacer click o llegar mediante tabulador al textbox "pass" cambia el tipo pero hay que pinchar otra vez para que salga el cursor parpadeando y poder escribir.

¿alguna idea para solucionarlos?

Dude-- · #29 (**permalink**) 14/04/2009, 08:00

He estado investigando varios días y no consigo solucionar los problemas de mi último post.

Lo único que he podido descubrir es que en relación con el problema número 1, IE parece tener algún problema con la asignación mediante DOM del atributo type.

Código:

objeto.type = "password";

Pero no veo la forma de solucionarlo.

Dude-- · #30 (**permalink**) 14/04/2009, 11:04

Si haces click en el textbox "pass" debe cambiar el type a password y mantener el foco. El problema surge en esta última parte, pero tras el código también pongo otras dudas que necesito resolver.

Código javascript:

Ver original<script type="text/javascript">
        function checkevent(e)
        {
            var obj=e.srcElement || e.target;
            var objeto = document.getElementById(obj.name);
            var evento = e.type;
            
            if ( obj.name == "email" )
            {
                if(evento == "focus" && objeto.value == "[email protected]")
                { objeto.value = ""; }
                if(evento == "blur" && objeto.value == "" )
                { objeto.value = "[email protected]"; }
            }
            
            if ( obj.name == "pass" )
            {
                if(evento == "focus" && objeto.value == "su contraseña")
                { 
                    var formulario = document.getElementById("identificacion");
                    var nuevotextbox = document.createElement("input");
                    /*nuevotextbox.setAttribute("value", "");
                    nuevotextbox.setAttribute("type", "password");*/
                    nuevotextbox.value = "";
                    nuevotextbox.type = "password";
                    nuevotextbox.name = "pass";
                    formulario.replaceChild(nuevotextbox, objeto);
                    nuevotextbox.id = "pass"
nuevotextbox.focus();
                }
                if(evento == "blur" && objeto.value == "")
                { objeto.value = "su contraseña"; objeto.type = "text"; }
            }
    
        }
</script>

Código html:

Ver original<form id="ide" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
    <label>Email:<input id="email" type="text" name="email" title="Email de usuario" value="aqui_tu@email" size="20"  /></label>
    <label>Contraseña:<input id="pass" type="text" name="pass"  value="aquí tu contraseña" size="10"  /></label>
    <label><input  type="checkbox" name="autologin" />Guardar</label>
    <input type="submit" value="OK" />
</form>

Primer problema:
Mirando el post en el que me basé para establecer donde debía situar la asignación del id al nuevo objeto (nuevotextbox.id = "pass"), deduzco que aparece detrás de "replaceChild" porque no puede haber dos objetos con el mismo ID a la vez, sin embargo si lo colocas antes funciona igualmente. ¿Es quizás porque el objeto no "existe" hasta que se reemplaza en el cuerpo de la página web, es decir, cuando se utiliza "replaceChild" y por tanto no hay "colision" dando igual donde coloques la asignación de id al nuevo objeto? no lo tengo nada claro.

Segundo problema:
¿Qué diferencia hay entre: nuevotextbox.setAttribute("type", "password") y nuevotextbox.type = "password"? ¿cual es correcto usar y por qué?

Tercer problema
nuevotextbox.focus(); en este caso no funciona en IE, sin embargo tal y como se puede ver aquí, focus() si funciona en IE, por lo que me pregunto ¿por qué no funciona en mi caso?