Tutoriales JavaScript

Cómo crear eventos que se ejecuten una sola vez en JavaScript

Todos hemos pasado por alguna ocasión en la que, por razones distintas, tocó crear un script que se ejecute sólo una vez y después de eso, no se ejecute más. Por ello, en el articulo de hoy, hablaremos sobre cómo crear eventos de un tiempo en Javascript.

Eventos JavaScript

Los eventos JavaScript, básicamente son funciones que se ejecutan basadas en una acción, por ejemplo: al dar clic, al pasar el mouse, al cargar el elemento, al copiar texto, al dar clic derecho, etc.

Ejemplo:

Y para terminar la explicación, y no desviarnos tanto del tema principal, les dejo una lista de eventos JavaScript y para qué sirven

Eventos "One-Time" utilizando jQuery

Comenzaremos con lo sencillo y quizá el más conocido, jQuery.
$("#elemento").one( "evento", function() { alert("Hola, soy una alerta que sólo aparecerá 1 vez."); } );

En "#elemento", pondríamos cualquier elemento HTML, ya sea un enlace, imagen, o el cuerpo de la página (body)….mientras que en "evento", claramente pondríamos un evento (blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress o keyup)

Ejemplo:

Sintaxis:
<button id="ejemplo">Botón de prueba</button>
<script>$("#ejemplo").one( "click", function() { alert("Hola, soy una alerta que sólo aparecerá 1 vez al hacer click."); } );</script>

resultado:

En el ejemplo se usó un elemento cuyo ID es "ejemplo", con el evento click (ya anteriormente se dejó una lista de eventos y sus usos), y como se esperaba el resultado, sólo funciona la primera vez que se le da click.

Eventos "One-Time" utilizando JavaScript nativo

Con JavaScript nativo, el código es un poco más largo, sin embargo, a la vez más corto porque no se requiere de ninguna librería.
// Seleccionamos un elemento, un evento y damos nombre a la función
document.getElementById("elemento").addEventListener("evento", nombredelafuncion);

// creamos la función "nombredelafuncion"
function nombredelafuncion(e) {
// removemos el evento
e.target.removeEventListener(e.type, nombredelafuncion);
// Después ingresamos un código a ejecutar
alert("Hola, soy una alerta que sólo aparecerá 1 vez.");
}

Ejemplo:

Sintaxis:
<button id="prueba2">Botón de prueba #2</button>
<script>
// Seleccionamos un elemento, un evento y damos nombre a la función
document.getElementById("prueba2").addEventListener("click", desarrollogeek);
// creamos la función "desarrollogeek"
function desarrollogeek(e) {
// removemos el evento
e.target.removeEventListener(e.type, desarrollogeek);
// Después ingresamos un código a ejecutar
alert("Hola, soy una alerta que sólo aparecerá 1 vez al dar clic.");
}
</script>

resultado:

Como podrán ver, el uso en ambos caso es tan sencillo como crear un blog, llamarlo Desarrollo Geek y figurar que sabes JavaScript. Ahora, a crear ese script de un sólo tiempo que tanto dolor de cabeza nos ha causado!.