从元素 Javascript 中删除所有事件侦听器

Question

I am developing a shopify app and I have to build everything on a page with pure vannila javascript and faced a problem, on which at the time I can't figure out a fix.

When the script is loaded, I assign event listeners like so:

 sidebarLi.setAttribute('id', 'faq-li-' + section.id);
 let sidebarLink = document.createElement('a');

          sidebarLi.addEventListener('mouseover', function () {
          sidebarLi.style.backgroundColor = settings.sidebar_background_hover_color;
        });

        sidebarLi.addEventListener('mouseout', function () {
          sidebarLi.style.backgroundColor = settings.sidebar_inactive_background_color;
        });

        sidebarLink.addEventListener('mouseover', function () {
          sidebarLink.style.color = settings.sidebar_category_hover_color;
        });

        sidebarLink.addEventListener('mouseout', function () {
          sidebarLink.style.color = settings.sidebar_category_color;
        });

Then, later on, I need to remove them, tried using this trick:

This is just an example:

var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

But the element this has all the event listeners I want to remove.

How to simply remove those event listeners, it could be done one by one, the code lines is not the priority for now.

Later on I need to remove from one element event listeners, and add those to another one, I play with active statuses and active element should not have any active event listeners, not active elements, should have them.

I get those two elements like so:

let activeLi = document.getElementById('faq-li-' + currentlyActiveSection.id);
let newActiveLi = document.getElementById('faq-li-' + section.id);

The activeLi element should not have any event listeners. The newActiveLi element should have all the event listeners which didn't have any before.

Any help will be appriciated, thanks.

Answer 1

There is no direct API to remove all the event listeners on element.

As you mentioned, Clone and replacing element is one way. Based on MDN documentation (cloneNode )

Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using addEventListener() or those assigned to element properties (eg, node.onclick = someFunction).

Following snippet is see the behaviour. After clicking "clone" button, the event listeners are not cloned with cloneNode .

 const ele = document.getElementById('hello'); ele.addEventListener('click', () => console.log("Hello")); const clone = document.getElementById('clone'); clone.addEventListener('click', () => { const new_ele = ele.cloneNode(true); ele.parentNode.replaceChild(new_ele, ele); console.log('Cloned and replaced without events. No more saying Hello'); });

 #hello { border: 1px solid grey; margin-bottom: 40px; padding: 10px; display: inline-block; } #clone { border: 1px solid grey; display: inline-block; padding: 10px; color: red; }

 <div> <div id="hello"> Say Hello on Click </div> <div id="clone"> clone </div> </div>