la ejecución de funciones está hecha y nunca más se volverá a llamar, pero aún puedo acceder al controlador de eventos dentro de él
(function () { const header = document.querySelector('h1'); header.style.color = 'red'; header.addEventListener('click', function () { this.style.color = this.style.color === 'blue' ? 'red' : 'blue'; }); })();En su código JavaScript, está adjuntando un controlador de eventos a un objeto en el DOM.
Dado que el elemento no desaparece, después de ejecutar su IIFE, el controlador aún está adjunto, aunque su variable de header ya no existe.
document.querySelector("h1").click() console.log("color after first click: " + document.querySelector("h1").style.color); (function () { const header = document.querySelector('h1'); header.style.color = 'red'; header.addEventListener('click', function () { this.style.color = this.style.color === 'blue' ? 'red' : 'blue'; }); })(); document.querySelector("h1").click() console.log("color after second click: " + document.querySelector("h1").style.color) document.querySelector("h1").click() console.log("color after third click: " + document.querySelector("h1").style.color) <h1>Test</h1> Puede ver esto aún mejor si adjunta el detector de eventos a través de la propiedad onclick , ya que no se puede acceder fácilmente al evento agregado a través de addEventListener después:
console.log(document.querySelector("h1").onclick); // -> null (function () { const header = document.querySelector('h1'); header.style.color = 'red'; header.onclick = function () { this.style.color = this.style.color === 'blue' ? 'red' : 'blue'; } })(); document.querySelector("h1").click() console.log(document.querySelector("h1").onclick) // -> your function <h1>Test</h1> Si desea eliminar un detector de eventos de un elemento, debe tener una referencia a la función que adjuntó; de lo contrario, el método removeEventListener no funcionará.