Dynamically add and remove event listener from html element

Question

I have editable html page so that user can copy and paste html elements and also dynamically create elements as well. I have hooked some event listener in these element but for obvious i need to hooked event listener in those dynamic added elements. I come up with the solution is that, every time user focus on these element, a event fire and the required event listener hooked up with that specific element.

$('body').on('focusin', '.propclass', function() {
    autocomplete(this,idsprop);
});

Everything is just working fine except that every time when I hooked event listener, it don't discard previous event listener but it add one more event listener for that element so for eexample, if I focus 5 times on that element, it hooked and call 5 times to that element.

I have tried to remove previous event listener by:

inp.removeEventListener("input",call_input,true);

But it didn't work.

function autocomplete(inp, arr) {
inp.removeEventListener("input",call_input,true);
inp.removeEventListener("keydown",call_keydown,true);


inp.addEventListener("input", function(e) {
    call_input(e);
});

inp.addEventListener("keydown", function(e) {
    call_keydown(e);
});

};

So every time autocomplete call, firstly I try to remove the listener then add new listener.

Is there is any way to delete previous event listener? Is my approach is correct or there is some better way to do this?

So, ultimately @CertainPerformance answer is the one your are looking for. Once he notices your update, he can probably tailor it to be more specific to your use case. If you test it and it works, remember to select his answer to award him credit and mark it as useful to other community users. — Alexander Nied
– Alexander Nied, Commented Mar 27, 2018 at 15:02

CertainPerformance · Accepted Answer · 2018-03-27 20:46:44Z

You have to have save the exact references to the previous function(s) passed as arguments to addEventListener. For example:

let inputListener;
let keydownListener;
function autocomplete(inp, arr) {
  // use the listeners that were assigned on the previous running of this function:
  inp.removeEventListener("input", inputListener, true);
  inp.removeEventListener("keydown", keydownListener, true);
  // assign new listeners to the outer variables so they can be referenced the next time:
  inputListener = e => call_input(e);
  keydownListener = e => call_keydown(e);
  inp.addEventListener("input", inputListener);
  inp.addEventListener("keydown", keydownListener);
}

That's if there's a chance of you adding more stuff inside of the listeners. If the listeners are only ever going to be call_input(e) and call_keydown(e), then pass call_input and call_keydown directly:

function autocomplete(inp, arr) {
  inp.removeEventListener("input",call_input,true);
  inp.removeEventListener("keydown",call_keydown,true);
  inp.addEventListener("input", call_input);
  inp.addEventListener("keydown", call_keydown);
}

If you originally use an anonymous function that isn't referenced elsewhere, you won't be able to remove it via removeEventListener.

fig · Accepted Answer · 2018-03-27 21:31:08Z

0

Inside the event listener you could have an if statement to check if a variable is true or false. Then you put your event listener code inside that!

answered Mar 27, 2018 at 21:31

fig

3842 silver badges11 bronze badges

Collectives™ on Stack Overflow

Dynamically add and remove event listener from html element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related