Remove event listeners using Javascript

Question

I'd like to remove event listeners using Javascript but it seems not working...

My code that not works :

function add () {
  var container = this.container;
  var span = document.createElement('span');
  span.classList.add('tooltip');
  span.innerHTML = this.msg;
  container.appendChild(span);
  this.tooltip = span;
  this.inputString.input.addEventListener('mouseenter', show.bind(this));
  this.inputString.input.addEventListener('mouseout', hide.bind(this));
}

function remove() {
  if (this.container.getElementsByClassName('tooltip').length) {
    this.inputString.input.removeEventListener('mouseenter', show);
    this.inputString.input.removeEventListener('mouseout', hide);
    this.container.removeChild(this.tooltip);
    this.msg = null;
    this.inputString = null;
    this.container = null;
    this.tooltip = null;
  }
}

function show () {
  var container = this.container,
      mainElmt = this.inputString.mainElmt,
      tooltip = this.tooltip;
  if ((container.offsetWidth - (mainElmt.offsetLeft + mainElmt.offsetWidth)) < ($(tooltip).outerWidth() + 5)) {
    tooltip.style.left = parseInt(mainElmt.style.left || getComputedStyle(this.inputString.el).left, 10) - ($(tooltip).outerWidth() + 5) + 'px';
    tooltip.classList.add('is-on-right');
  } else {
    tooltip.style.left = parseInt(mainElmt.style.left || getComputedStyle(this.inputString.el).left, 10) + parseInt(mainElmt.style.width || this.inputString.el.style.width, 10) + 5 + 'px';
    tooltip.classList.add('is-on-left');
  }
  tooltip.style.top = parseInt(mainElmt.style.top || getComputedStyle(this.inputString.el).top, 10) - 15 + (parseInt(mainElmt.style.height || this.inputString.el.style.height, 10) / 2) + 'px';
  tooltip.style.display = 'block';
}

ToolTip.js:52 Uncaught TypeError: Cannot read property 'mainElmt' of null — tonymx227
– tonymx227, Commented Jul 7, 2016 at 12:43

avetisk · Accepted Answer · 2016-07-07 12:51:25Z

1

.bind() creates a copy, so when you use .removeEventListener you are actually passing another reference.

You have 2 approches:

1) you can store the bound function:

this.show = show.bind(this);

and then use it:

.addEventListener('...', this.show);
.removeEventListener('...', this.show);

2) add these functions to this prototype:

// Assuming that `this` is an instance of function MyClass() {}
MyClass.prototype.show = function show() {...}

edited Jul 7, 2016 at 12:51

answered Jul 7, 2016 at 12:49

avetisk

12.4k4 gold badges28 silver badges38 bronze badges

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

2 Comments

asenovm Over a year ago

Can't see how this is any different from the answer I posted some 5 minutes earlier.

avetisk Over a year ago

@asenovm: 1) you didn't provided a proper example, you just provided his own LOCs 2) I provided another way to solve it, which you didn't :)

asenovm · Accepted Answer · 2016-07-07 12:43:32Z

0

When you invoke show.bind(this) this effectively creates a new function. So when you write:

this.inputString.input.addEventListener('mouseenter', show.bind(this));

This adds one function (let's call it function A)

and when you write

this.inputString.input.removeEventListener('mouseenter', show.bind(this));

this removes a different function (function B).

You need to store a reference and add and remove the same function in order for this to work.

answered Jul 7, 2016 at 12:43

asenovm

6,5373 gold badges45 silver badges53 bronze badges

1 Comment

tonymx227 Over a year ago

And is that possible to something like this.inputString.input.addEventListener('mouseenter', this.show.bind(this));

Collectives™ on Stack Overflow

Remove event listeners using Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related