Evento onfocus solo una vez

[Daven]

Hola a todos, tengo en un textbox un evento onfocus que llama a una funcion de ajax. Mi pregunta es si hay alguna forma de que ese evento solo se ejecute una vez, para que si el usuario vuelve a hacer clic en el textbox no se ejecute mas el evento.

Gracias a todos

[Alexis88]

Utiliza el método removeEventListener para desligar al evento del elemento en cuestión.

Código HTML:

<input type = "text" id = "foo" />
 

Código Javascript:

var input = document.querySelector("#foo");
 
input.addEventListener("focus", function(event){
    alert("Solo verás este mensaje una vez.");
    this.removeEventListener("focus", arguments.callee);
}, false);
 

DEMO

Saludos

Edito: Antes de que me lo preguntes, la presencia de arguments.callee se debe a que la función que se ejecuta es anónima (no posee un nombre) y como lo que deseo es que ya no se ejecute dicha función al volver a dar el enfoque a la caja de texto, hago referencia a ella utilizando la propiedad en cuestión.

[PHPeros]

La idea que plantea Alexis88 es buena, pero hay un problema... arguments.callee está en desuso.

Lo más "recomendable" en estos casos sería declararla afuera y después referenciarla, o simplemente darle un nombre al listener del evento (que se puede):

Código Javascript:

var input = document.querySelector("#foo");
 
input.addEventListener("focus", function k(event){
    alert("Solo verás este mensaje una vez.");
    this.removeEventListener("focus", k);
}, false);
 

[IsaBelM]

en mi opinión, la manera más adecuada de hacerlo es almacenar la función anónima en una variable

var input = document.querySelector("#foo"), fnc = null;

input.addEventListener("focus", fnc = function(event){
alert("Solo verás este mensaje una vez.");
this.removeEventListener("focus", fnc);
}, false);

[Alexis88]

Y si quieres tenerlo de forma general, es decir, ejecutar cualquier evento una sola vez en cualquier elemento (del mismo modo en el que se realiza con el método .one() de jQuery), puedes implementar esto:

Código Javascript:

window.Element.prototype.one = function(event, callback){
    this.addEventListener(event, this.call = function(){
        callback();
        this.removeEventListener(event, this.call, false);
    }, false);    
};
 
document.querySelector("#id_elemento").one("click", function(){
    alert("Solo verás este mensaje una vez.");
});
 

De este modo, aplicas este método a cualquier elemento del documento.

DEMO

Saludos

[Daven]

gracias por vuestras respuestas, probare y os comento

[Daven]

Ese codigo javascript lo pondria independientemente de la funcion a la que llamo con el onfocus? o dentro de la funcion que estoy llamando?

[Alexis88]

Solo tendrías que copiar y pegar las primeras 6 líneas al inicio de tu archivo JS.

Saludos

[Daven]

he metido el codigo pero me sigue ejecutando, incluso el mensaje que solo debe de salir una vez vuelve a salir (lo deje para comprobar que hacia bien su cometido)

Código:

function nuevaLinea2(str) {
  
  var input = document.querySelector("#art1");
 
input.addEventListener("focus", function k(event){
    alert("Solo verás este mensaje una vez.");
    this.removeEventListener("focus", k);

  
   if (str=="") {
    document.getElementById("linea2").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("linea2").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","linea2.php?q="+str,true);
  xmlhttp.send();
  }, false);
}

esa es la funcion a la que llama el onfocus, el fin de ese codigo es que aparezca un textbox justo abajo cuando obtenga el textbox el focus. La razon de que solo quiera una ejecucion es que me borra el dato que ya tenga si el usuario vuelve a hacer focus en el textbox anterior.

muchas gracias por vuestra ayuda

[Alexis88]

No, pues, fíjate en lo que estás haciendo. Estás agregando la asignación de la función a la caja de texto dentro de la función que ya tenías creada.

Prueba así:

Código Javascript:

var input = document.querySelector("#art1");
 
input.addEventListener("focus", fn = function (event){ 
    if (!this.value.length) {
        document.getElementById("linea2").innerHTML = "";
        return;
    } 
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("linea2").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "linea2.php?q=" + str, true);
    xmlhttp.send();
 
    this.removeEventListener("focus", fn);
}, false);
 

Saludos

[Daven]

Alexis88 que va no ejecuta ahora la funcion. Voy a revisar haber si algo no coincide.

Gracias por tu tiempo!

[Alexis88]

Solo por las dudas, asegúrate de que tu código JavaScript se encuentre después de todos los elementos de tu documento, es decir:

Código HTML:

<!DOCTYPE html>
<html lang = "es">
<head>
    <meta charset = "utf-8" />
    <title>Título</title>
</head>
<body>
    <!-- Aquí van todos tus elementos -->
    <script type = "text/javascript">
        //Aquí va tu código JavaScript
    </script>
</body>
</html>
 

Saludos

[Daven]

Tenia la funcion en HEAD, la he puesto en el BODY despues de todos los elementos y el mismo resultado

[Alexis88]

Si nos muestras tu código actualizado, será más fácil identificar el problema.

[Daven]

perdon por la ausencia, este es el codigo que tengo puesto:

Código:

<script type = "text/javascript">
function nuevaLinea2(str) {
	
	var input = document.querySelector("#art1");
	 
	input.addEventListener("focus", fn = function (event){ 
		if (str=="") {
			document.getElementById("linea2").innerHTML="";
			return;
		  } 
		  if (window.XMLHttpRequest) {
			// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		  } else { // code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		  xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			  document.getElementById("linea2").innerHTML=xmlhttp.responseText;
			}
		  }
		  xmlhttp.open("GET","linea2.php?q="+str,true);
		  xmlhttp.send();
	 
	}, false);
	this.removeEventListener("focus", fn);
}
</script>

mas arriba tengo el objeto que llama al evento:

Código:

<input type="text" size="10" id="art1" name="art1" class="celda" onblur="showUser(this.value);" onclick="nuevaLinea2(1);" value="<?php echo $fndArt; ?>" />

[IsaBelM]

evidentemente si asignas el evento cada vez que haces click en el elemento, por mucho que lo elimines, se asignará de nuevo. el problema que se aprecia es que le estás pasando un parámetro, por lo que no puedes usar el evento onload. tendrás que mostrarnos de donde obtienes es parámetro. aunque supongo que es la "posición" del elemento dentro de una colección

por otro lado no estás haciendo lo que se te indica

function nuevaLinea2(str) {

var input = document.querySelector("#art1"), fn = null;

input.addEventListener("focus", fn = function (event){

..........

this.removeEventListener("focus", fn);
}, false);

[Daven]

ese parametro lo paso manualmente, porque la funcion esa la he adaptado de otra cosa para lo que necesito, y esa funcion me exige un parametro.

gracias por vuestra ayuda

[Daven]

ademas una consulta, con esa funcion veo que ya se le asigna el evento... entonces ?¿no es necesario asignarle al textbox el onlick="evento();" no? Ya se lo asigna la funcion en si

[IsaBelM]

no es no sea necesario, es que incurrirías el mismo problema.

si el parámetro que le pasas lo escribes tú, entonces puede hacer algo como esto

window.addEventListener('load', function(event) {

var input = document.querySelector("#art1"), fn = null;

input.addEventListener("focus", fn = function (event){

............

this.removeEventListener("focus", fn);
}, false);
}, false);