Remove all event listeners from an element Javascript - Stack Overflow

admin管理员组

文章数量:1410697

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.

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.

• javascript
• event-listener

Share Improve this question Follow edited Dec 29, 2020 at 18:56 AbsoluteBeginner 2,26333 gold badges1414 silver badges2424 bronze badges asked Dec 29, 2020 at 16:11 ViktorasssITViktorasssIT 38722 gold badges99 silver badges2828 bronze badges 3

• 1 can this answer your question developer.mozilla/en-US/docs/Web/API/EventTarget/… ? – Monsieur Merso Commented Dec 29, 2020 at 16:15
• Maybe, so I need to create seperate functions, so I could remove them later on with target.removeEventListener? Because, now the functions are inside the eventListener, do I understand it correctly? – ViktorasssIT Commented Dec 29, 2020 at 17:00
• 1 Yes, you have to keep reference to added functions in order to remove them afterwards with removeEventListener – Monsieur Merso Commented Dec 30, 2020 at 7:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 (e.g., 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>

本文标签： Remove all event listeners from an element JavascriptStack Overflow