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):
let input = document.querySelector("input");
input.type = "button";
input.value = "aceptar";
function funcionAceptar() {
console.log("Estoy a la escucha")
let parent = input.parentNode.parentNode; //el checkbox esta dentro de un td y obtengo la fila(tr) para trabajar en sus elementos hijos
let pHijos = parent.querySelectorAll("td");
pHijos.forEach((h, index) => {
if (index == 0) {
input.type = "checkbox";
input.value = "";
input.checked = false;
} else {
h.contentEditable = false;
h.classList.remove("editableOn");
h.textContent = "Ahora ya no tengo la clase editableOn";
}
});
input.removeEventListener("click", funcionAceptar);
console.log("Dejo de estar a la escucha")
}
input.addEventListener("click", funcionAceptar);
<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>
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
.
Aquí el enlace directo a la documentación de esta opción "once" (en inglés).
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:
{once:true}
y usarlo como tercer parámetro, después de la función.
Aquí un ejemplo funcional:
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>
removeEventListener
, puedes remover todos los eventosclick
usandoinput.onclick = null
. La diferencia radica en que esta solución que te propongo borra TODOS los eventosclick
asociados alinput
. En cambio, conremoveEventListener
borras el evento asociado a una función específica.