Skip to main content
se añadieron 167 caracteres en el cuerpo
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

Aquí el enlace directo a la documentación de esta opción "once" (en inglés).

Su descripción (traducida) dice:

Su descripción (traducida) dice:

Aquí el enlace directo a la documentación de esta opción "once" (en inglés).

Su descripción (traducida) dice:

Agregada segunda solución
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

Por lo tanto, podriamos eliminar el addeventListeneraddEventListener evitando el uso de removeEventListener de este modo:

{once:true}

y usarlo como tercer parámetro, después de la función.

Aquí un ejemplo funcional:

Por lo tanto, podriamos eliminar el addeventListener evitando el uso de removeEventListener de este modo:

Por lo tanto, podriamos eliminar el addEventListener evitando el uso de removeEventListener de este modo:

{once:true}

y usarlo como tercer parámetro, después de la función.

Aquí un ejemplo funcional:

Agregada segunda solución
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28

Para hacer lo que pides, debespuedes ponerlo en una función con nombre (y no anónima) para luego poder desvincular el evento correctamente usando dicho nombre de función.

Actualización: Hay una segunda solución más abajo sin removeEventListener y usando la opción once como tercer parámetro del addEventListener

Por ejemplo (pulsa Ejecutar para verlo en acción):

Agrego enlace a la documentación de removeEventListener para más opciones.

Segunda solución (sin removeEventListener y con opción "once")

Mirando la documentación de addEventListener en inglés he encontrado esta otra sintaxis con las explicaciones de las opciones:

addEventListener(type, listener, options);

donde entre ellas se encuentra: once, que por defecto es false.

Su descripción (traducida) dice:

Un valor booleano que indica que el agente de escucha debe invocarse como máximo una vez después de agregarse. Si es true (verdadero), el detector se eliminará automáticamente cuando se invoque. Si no se especifica, el valor predeterminado es false (falso).

Por lo tanto, podriamos eliminar el addeventListener evitando el uso de removeEventListener de este modo:

let input = document.querySelector("input");
input.type = "button"; 
input.value = "aceptar";
input.addEventListener("click", function() {
    console.log("Estoy a la escucha")
    let parent = input.parentNode.parentNode;
    let pHijos = parent.querySelectorAll("td");
    pHijos.forEach((h, index) => {
        if (index == 0) {
            input.type = "checkbox";
            input.value = "";
            input.checked = false;
        } else {
            h.contentEditable = false; //anteriormente hice editables mis campos
            h.classList.remove("editableOn");
            h.textContent = "Ahora ya no tengo la clase editableOn";
        }
    });
    console.log("Dejo de estar a la escucha gracias a la opción 'once'")
}, {once:true});
<table border=1>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
        <td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
    </table>

Para hacer lo que pides, debes ponerlo en una función con nombre (y no anónima) para luego poder desvincular el evento correctamente usando dicho nombre de función.

Por ejemplo (pulsa Ejecutar para verlo en acción):

Agrego enlace a la documentación de removeEventListener para más opciones.

Para hacer lo que pides, puedes ponerlo en una función con nombre (y no anónima) para luego poder desvincular el evento correctamente usando dicho nombre de función.

Actualización: Hay una segunda solución más abajo sin removeEventListener y usando la opción once como tercer parámetro del addEventListener

Por ejemplo (pulsa Ejecutar para verlo en acción):

Agrego enlace a la documentación de removeEventListener para más opciones.

Segunda solución (sin removeEventListener y con opción "once")

Mirando la documentación de addEventListener en inglés he encontrado esta otra sintaxis con las explicaciones de las opciones:

addEventListener(type, listener, options);

donde entre ellas se encuentra: once, que por defecto es false.

Su descripción (traducida) dice:

Un valor booleano que indica que el agente de escucha debe invocarse como máximo una vez después de agregarse. Si es true (verdadero), el detector se eliminará automáticamente cuando se invoque. Si no se especifica, el valor predeterminado es false (falso).

Por lo tanto, podriamos eliminar el addeventListener evitando el uso de removeEventListener de este modo:

let input = document.querySelector("input");
input.type = "button"; 
input.value = "aceptar";
input.addEventListener("click", function() {
    console.log("Estoy a la escucha")
    let parent = input.parentNode.parentNode;
    let pHijos = parent.querySelectorAll("td");
    pHijos.forEach((h, index) => {
        if (index == 0) {
            input.type = "checkbox";
            input.value = "";
            input.checked = false;
        } else {
            h.contentEditable = false; //anteriormente hice editables mis campos
            h.classList.remove("editableOn");
            h.textContent = "Ahora ya no tengo la clase editableOn";
        }
    });
    console.log("Dejo de estar a la escucha gracias a la opción 'once'")
}, {once:true});
<table border=1>
      <tr>
        <td>
          <input type="checkbox">
        </td>
        <td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
        <td class="editableOn" contentEditable="true">Inicialmente tengo la clase editableOn</td>
    </table>

Agregado enlace a removeEventListener
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
Loading
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
Loading