Javascript: Remove bound event handler from outside set up function

Question

I am trying to remove an event listener with bound variables from a different function from where the listener was set.

I have already sen this post that describes how to remove a bound listener from within the same function, which is different from what I am trying to do:

function testBind(var1,var2){
//remove the bound event from within this function <<<
alert('bound event now removed');
}

function setEvent(){
var addEvent =  document.getElementById("testBtn");   
var boundYes = yesFunction.bind( this, this );
addEvent.addEventListener('mouseup', boundYes);
}

All of the examples I found have the event listener being removed inside the same function where the event listener is set:

addEvent.removeEventListener("mouseup", boundYes );

I understand that using bind creates a new event listener every time and to remove the listener you need to set and remove it by the same variable.

How can I properly remove the event listener from the testBind function?

You need to store `boundYes` somewhere where `testBind` can access it. — Bergi, Jun 24 '19 at 04:39

score 2 · Accepted Answer · answered Jun 24 '19 at 01:10

If (due to constraints in your code) this preferred solution is not possible, another option would be to associate the handler to the element via a custom property:

addEvent.boundYes = boundYes; /* Assign boundYes function to element */

This would give you the means to access this function handler instance via the DOM element itself when deregistering the 'mouseup' event during testBind():

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

function testBind(var1, var2) {

  const addEvent = document.getElementById("testBtn");
  const boundYes = addEvent.boundYes;

  /* Check to see if boundYes associated with element */
  if (boundYes) {

    /* Remove the event listener from element */
    addEvent.removeEventListener('mouseup', boundYes);

    /* Disaccoaite the function from element */
    addEvent.boundYes = undefined;
    alert('bound event now removed');
  }
}

function setEvent() {
  var addEvent = document.getElementById("testBtn");
  
  /* Prevent multiple boundYes handlers */
  if (!addEvent.boundYes) {

    var boundYes = yesFunction.bind(this, this);
    addEvent.addEventListener('mouseup', boundYes);

    /* Attach boundYes function to element */
    addEvent.boundYes = boundYes;
  }
}


setEvent();

testBind();

<button id="testBtn">testBtn</button>

This is a very creative solution utilizing a technique that is new to me. Thank you very much. Exactly what I needed in my project. — nomaam, Jun 25 '19 at 06:01

score 1 · Answer 2 · answered Jun 24 '19 at 00:53

One option would be for setEvent to return the bound function, so that testBind can remove it:

function testBind(boundListener, element) {
  element.removeEventListener('mouseup', boundListener);
}

function setEvent() {
  var element = document.getElementById("testBtn");
  const yesFunction = () => console.log('listener running');
  var boundListener = yesFunction.bind(this, this);
  element.addEventListener('mouseup', boundListener);
  return { boundListener, element };
}

const { boundListener, element } = setEvent();
testBind(boundListener, element);

<button id="testBtn">click</button>

You'll need some way to pass around the bound function. If you create it in setEvent, setEvent should return the bound function, or call testBind itself, or something like that. You can also create the bound function outside of setEvent, pass it to setEvent, and also pass it to testBind.

Javascript: Remove bound event handler from outside set up function

2 Answers2