How to remove a single function from click event listener that has multiple functions, using Javascript?

Question

Using Javascript, how do you remove a single function from a "click" event listener, after the first click event, when there are multiple functions being used on the element with the "click" event listener? Here, after the first click, only toggleView() should remain and renderList() should be removed.

const button = document.getElementById("view_button");
button.addEventListener("click", () => {
  toggleView(); // want to keep this indefinitely
  renderList(); // want to remove this after the first click
  button.removeEventListener("click", renderList);
});

Is adding 2 event listeners a choice or you need to handle both functions in the same listener? Adding 2 separate listeners would be a choice because you could remove the one calling renderList after executing once — fgkolf
– fgkolf, Commented Oct 27, 2021 at 17:55
From the code you posted, there's only one event handler, that anonymous arrow function. To get what you want, set a flag to keep track of whether a "click" has been handled, and use that to run or not run the second function. — Pointy
– Pointy, Commented Oct 27, 2021 at 17:55

connexo · Accepted Answer · 2021-10-27 18:05:06Z

1

You need to add both separately, and specify { once: true } on the one you want removed after first execution.

See MDN:

once
A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

function toggleView() {
  console.log('toggleView');
}

function renderList(evt) {
  console.log('renderList');
}


const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList, { once: true });

<button type="button" id="view_button">Click</button>

answered Oct 27, 2021 at 18:05

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ray Suelzer Over a year ago

For my own knowledge, what order are they executed in? The order in which the listeners are added?

connexo Over a year ago

Depending on whether you also have any delegate listeners, and also if you configred your listeners using { capture: true } (which reverses bubbling into trickling). In general, first all listeners that are registered directly on the event emitter are called, in order of registration. Then those attached on the parent, also always in order of registration. This continues until you eventually reach document or window.

epascarello · Accepted Answer · 2021-10-27 17:57:50Z

0

You can add two event listeners and remove the one

function toggleView() {
  console.log('toggleView');
}

function renderList(evt) {
  evt.currentTarget.removeEventListener("click", renderList);
  console.log('renderList');
}


const button = document.getElementById("view_button");
button.addEventListener("click", toggleView);
button.addEventListener("click", renderList);

<button type="button" id="view_button">Click</button>

or you can just add logic to determine if the function should be run.

function toggleView() {
  console.log('toggleView');
}

function renderList() {
  console.log('renderList');
}


const button = document.getElementById("view_button");
button.addEventListener("click", () => {
  toggleView();
  if (!button.dataset.clicked) {
    renderList();
    button.dataset.clicked = '1';
  }
});

<button type="button" id="view_button">Click</button>

answered Oct 27, 2021 at 17:57

epascarello

208k20 gold badges206 silver badges246 bronze badges

1 Comment

connexo Over a year ago

No need for manual removal here, check once optional parameter: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

Ray Suelzer · Accepted Answer · 2021-10-27 18:19:39Z

0

I would use a closure here to keep track of if the item has been clicked.

const button = document.getElementById("view_button");

function toggleView() {
  console.log('Toggle View');
}

function renderList() {
  console.log('Render List');
}

function clickHandler() {
  let hasBeenClicked = false;
  return function () { 
      toggleView();
      if (!hasBeenClicked) {
        renderList();
        hasBeenClicked = true;
     }
  };  
}



button.addEventListener("click", clickHandler());

<button id="view_button" type="button">View Button</button>

answered Oct 27, 2021 at 18:19

Ray Suelzer

4,1375 gold badges41 silver badges60 bronze badges

1 Comment

connexo Over a year ago

Again, for what OP needs the EventTarget API specifically already offers a solution.

Collectives™ on Stack Overflow

How to remove a single function from click event listener that has multiple functions, using Javascript?

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related