如何在不克隆或访问事件侦听器创建的情况下从元素中删除事件侦听器？

Question

I'm helping someone build a website through a website builder, Kajabi. Some of the JavaScript code is included by default in the website and there is no way to edit it. I'm trying to remove an event listener on the window element, but the event listener creation happened in the code that I can't edit. This code fires before anything else, so there's no way for me to interrupt it either. On dev tools, I tracked down the event handler and found this:

(o=g.handle)||(o=g.handle=function(t){return"undefined"!=typeof Ft&&Ft.event.triggered!==t.type?Ft.event.dispatch.apply(e,arguments):void 0})

That's all the information I can find on the event listener. I understand cloning works to remove event listeners, but removing all listeners from children of the window element would cause trouble.

Any tips?

Answer 1

Going on with assumptions here from the little code you posted. o is g.handle and that's an inline event listener, so you can simply overwrite it if you have access to them.

g.handle = false;

It seems that code is dispatching a new event from their Ft variable here Ft.event.dispatch.apply(e,arguments) . It's a bit different than vanilla javascript's .dispatchEvent() but I'm assuming its just an implementation of it.

If that's not the case and there IS someplace else that's adding an event listener with .addEventListener() that you can't remove because you have no reference to the function, you can do a shallow clone and append the children to the clone element. The cloned element will lose any events attached with addEventListener() but their children will be unaffected. You're just appending the original children to the new cloned element.

let oldElement = document.getElementById("toClone");

// - Shallow clone
let clone = oldElement.cloneNode(false);

// - Adding the original children to the clone
while (oldElement.firstChild) {
    clone.appendChild(oldElement.firstChild);
}

// - Replacing them
oldElement.parentNode.appendChild(clone);
oldElement.remove();