how to add and than remove eventlistener in JavaScript

new_line=function() { var conteiner=document.createElement('div'); conteiner.classList.add('conteiner'); conteiner.addEventListener('click', function (event){on_click(event, conteiner);}, false);//this is an anonymous function so it is always new document.body.appendChild(conteiner); create_el(conteiner); };

I have this function and in it addEventListener. I know that when I'm giving: function (event){on_click(event, conteiner);} I can't remove this EventListener, but I need give on_click function second parameter.

function (event){on_click(event, conteiner);}

delete_conteiner=function(which) { which.removeEventListener("click", function (event){on_click(event, conteiner);}, false);//this isn't working document.body.removeChild(which); };

Is it posible to add EventListener, which execute on_click, and than remove it in oder EventListener? Here full code:

You can do that with DOMelement.removeEventListener(), see here developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
– cars10m
Jun 29 at 9:11

DOMelement.removeEventListener()

I like how this question got 5 answers explaining the same thing in different ways in less than 15 minutes.
– ippi
Jun 29 at 9:28

4 Answers
4

The removeEventListener() method removes an event handler that has been attached with the addEventListener() method.

removeEventListener()

addEventListener()

Note: To remove event handlers, the function specified with the addEventListener() method must be an external function, like in the example below (click_event_func).

addEventListener()

Anonymous functions, like "function (event){on_click(event, conteiner);}" will not work.

function (event){on_click(event, conteiner);}

click_event_func = function(event) { on_click(event, conteiner); }; new_line = function() { var conteiner = document.createElement('div'); conteiner.classList.add('conteiner'); conteiner.addEventListener('click', click_event_func, false); document.body.appendChild(conteiner); create_el(conteiner); }; delete_conteiner = function(which) { which.removeEventListener("click", click_event_func, false); document.body.removeChild(which); };

this is correct way if conteiner is global.
– Zlog
Jun 29 at 9:50

@Zlog yes, as Anonymous functions creates new function each time so it wont understand which function to remove as it is new function each time
– Vivek
Jun 29 at 9:53

which is variable that I get one conteiner (this is hard to explain please go to link>link)
– Zlog
Jun 29 at 10:01

To remove event handlers, the function specified with the addEventListener() method must be an external function, like in the example below (click_event_func).

- what does 'external function' mean? You just need to pass in the same reference to both addEventListener and removeEventListener.
– jannis
Jun 29 at 10:13

To remove event handlers, the function specified with the addEventListener() method must be an external function, like in the example below (click_event_func).

addEventListener

removeEventListener

So could you say me where I need to implement this function if conteiner isn't global
– Zlog
Jun 29 at 10:23

If you want to pass another param to an event listener you have to bind it to the function, as eventlistener will only pass the event itself (click event in your example). If you pass the exact same params and the same function when you remove it will remove it successfuly according to MDN.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

I think your problem is you don't use named functions.

Try to do like this:

function NameHere(event) { on_click(event, conteiner); } new_line=function() { var conteiner=document.createElement('div'); conteiner.classList.add('conteiner'); conteiner.addEventListener('click', NameHere, false); document.body.appendChild(conteiner); create_el(conteiner); }; delete_conteiner=function(which) { which.removeEventListener("click", NameHere, false);//this isn't working document.body.removeChild(which); };

The problem is when you try to remove the listener without using names, you will remove a different function from the one you added before.

Yes, this is correct if conteiner is global variable, but it isn't
– Zlog
Jun 29 at 9:43

You can simply add a second parameter and pass it. Mine was just an example to exaplain you the problem.
– Loris
Jun 29 at 9:57

Could you write me how to add next parameter, becouse I've tried this:NameHere(event, conteiner).
– Zlog
Jun 29 at 10:06

NameHere(event, conteiner)

But this was executeing the function ones on implementation :(
– Zlog
Jun 29 at 10:10

If u do this .addEventListener('click', NameHere(null,conteiner), false); and function NameHere(event,element) , u will have your DOM element into the function.
– Loris
Jun 29 at 10:27

By example:

which.removeEventListener("click", function (event){on_click(event, conteiner);}, false); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ // This here creates a new function. It's not related to // the function you created with addEventListener earlier. // Trying to remove it from eventlisteners on "which" is silly // because it doesn't exist there.

Instead:

var eventHandler = function(event){on_click(event, conteiner);}; // Store for later conteiner.addEventListener('click', eventHandler); // Add. conteiner.removeEventListener('click', eventHandler); // Remove.

You can remove eventListeners as long as you referencing the same function.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Search This Blog

Mgiyuk