how to add and than remove eventlistener in JavaScript

Question

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.

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:

(function()
{
    var create_ul, user_names, menage_ul, open, look_for, save_as, user_name, real_name, on_click, set_up, create_el, show_hide_btn_click, delete_el, on_load, get_object_to_save, change_all, save, delete_conteiner, change_see_able, restart, new_line, new_cubes, scroll_with_ctrl;

    create_el=function(where, options)
    {
        var configs=options || {
            class_names:'textbox',
            value:''
        };
        var block=document.createElement('textarea');
        block.className=configs.class_names;
        block.value=configs.value;
        where.appendChild(block);
    };

    delete_el=function(where, which)
    {
        where.removeChild(which);
    };

    delete_conteiner=function(which)
    {
        which.removeEventListener("click", function(event){on_click(event, conteiner);}, false);//I know that won't work
        document.body.removeChild(which);
    };

    change_see_able=function(where)
    {
        var is_see_able=true;
        where.classList.forEach(function(str){
            if(str=='none_see_able')
            {
                is_see_able=false;
            }
        });
        if(is_see_able)
        {
            where.classList.add('none_see_able');
        }
        else
        {
            where.classList.remove('none_see_able');
        }
    };

    on_click=function(ev, conteiner)
    {
        var is_box_cliked=false;
        ev.target.classList.forEach(function(className){
            if(className=='textbox')
            {
                is_box_cliked=true;
            }
        });
        if(is_box_cliked)
        {
            if(ev.shiftKey)
            {
                if(!ev.ctrlKey)
                {
                    if(!ev.altKey)
                    {
                        create_el(conteiner);
                    }
                }
            }
            else if(ev.ctrlKey)
            {
                if(!ev.altKey)
                {
                    delete_el(conteiner, ev.target);
                }
            }
            else if(ev.altKey)
            {
                change_see_able(ev.target);
            }
            else
            {}
        }
        else
        {
            if(ev.ctrlKey)
            {
                delete_conteiner(conteiner);
            }
            else
            {
                if((conteiner.querySelector('.textbox')==null) || ev.shiftKey)
                {
                    create_el(conteiner);
                }
            }
        }
    };

    get_object_to_save=function()
    {
        var conteiners=document.body.querySelectorAll('.conteiner'), conteiners_to_save=Array();
        conteiners.forEach(function(textboxes){
            var textboxes=textboxes.querySelectorAll('.textbox'), textboxes_to_save=Array();
            textboxes.forEach(function(textbox){
                var textbox_to_save={
                    class_names:textbox.className,
                    value:textbox.value
                };
                textboxes_to_save.push(textbox_to_save);
            });
            conteiners_to_save.push(textboxes_to_save);
        });
        return [user_name, JSON.stringify(conteiners_to_save)];
    };

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

    load=function(conteiners)
    {
        if(conteiners.length===0)
        {
            new_line();
        }
        else
        {
            conteiners.forEach(function(textboxes){
                var conteiner=document.createElement('div');
                conteiner.classList.add('conteiner');
                conteiner.addEventListener('click', function(event){
                    on_click(event, conteiner);
                }, false);
                document.body.appendChild(conteiner);
                textboxes.forEach(function(options_for_textbox){
                    create_el(conteiner, options_for_textbox);
                });
            });
        }
    }

    save=function()
    {
        localStorage.setItem(real_name, JSON.stringify(get_object_to_save()));
    };

    look_for=function()
    {
        for(i=localStorage.length-1; i>=0; i--)
        {
            if(localStorage.key(i)!='name_last')
            {
                if(user_name===JSON.parse(localStorage.getItem(localStorage.key(i)))[0])
                {
                    return [true, localStorage.key(i)];
                }
            }
        }
        user_names.push(user_name);
        localStorage.setItem('names', JSON.stringify(user_names));
        return [false, 'c_'+new Date().getTime()];
    };

    open=function()
    {
        if(document.querySelector('.buttons > .open > input').value!='')
        {
            var conteiners=document.querySelectorAll('.conteiner');
            conteiners.forEach(function(conteiner)
            {
                delete_conteiner(conteiner);
            });
            user_name=document.querySelector('.buttons > .open > input').value;
            document.querySelector('.buttons > .open > input').value='';
            var is=look_for();
            real_name=is[1];
            localStorage.setItem('name_last', real_name);
            if(!is[0])
            {
                localStorage.setItem(real_name, JSON.stringify([user_name, JSON.stringify(new Array())]));
            }
            conteiners=JSON.parse(JSON.parse(localStorage.getItem(real_name))[1]);
            load(conteiners);
        }
    };

    save_as=function()
    {
        if(document.querySelector('.buttons > .save_as > input').value!='')
        {
            user_name=document.querySelector('.buttons > .save_as > input').value;
            document.querySelector('.buttons > .save_as > input').value='';
            real_name=look_for();
            localStorage.setItem('name_last', real_name);
            localStorage.setItem(real_name, JSON.stringify(get_object_to_save()));
        }
    };

    on_load=function()
    {
        var name=localStorage.getItem('name_last');
        if(localStorage.length===0)
        {
            user_names=new Array();
            localStorage.setItem('names', JSON.stringify(new Array()));
            user_name='first';
            real_name=look_for()[1];
            localStorage.setItem('name_last', real_name);
            localStorage.setItem(real_name, JSON.stringify([user_name, JSON.stringify(new Array())]));
        }
        else
        {
            real_name=name;
            user_name=JSON.parse(localStorage.getItem(real_name))[0];
            user_names=JSON.parse(localStorage.getItem('names'));
        }
        var conteiners=JSON.parse(JSON.parse(localStorage.getItem(real_name))[1]);
        load(conteiners);
    };

    new_cubes=function()
    {
        var conteiners=document.querySelectorAll('.conteiner');
        conteiners.forEach(function(conteiner){
            create_el(conteiner);
        });
    };

    restart=function()
    {
        var conteiners=document.querySelectorAll('.conteiner');
        conteiners.forEach(function(conteiner){
            delete_conteiner(conteiner);
        });
        new_line();
    };

    change_all=function()
    {
        var value=document.querySelector('.buttons > .to_all > textarea').value;
        document.querySelector('.buttons > .to_all > textarea').value='';
        var textboxes=document.querySelectorAll('.textbox');
        textboxes.forEach(function(textbox){
            textbox.value=value;
        });
    };

    set_size=function()
    {
        //textareas in menu prepare for calculations
        var textareas=document.querySelectorAll('label textarea');
        textareas.forEach(function(textarea){
            textarea.style.height='0px';
        });
        //inputs in menu prepare for calculations
        var inputs=document.querySelectorAll('label input');
        inputs.forEach(function(input){
            input.style.height='0px';
        });
        //show_hide_btn prepare for calculations
        var show_hide_btn=document.querySelector('.button.show_hide_menu');
        show_hide_btn.style.height='0px';
        //get height for textareas and inputs
        var width=textareas[0].offsetWidth+'px';
        var height=document.querySelector('.to_all .to_all').offsetHeight+'px';
        var uls=document.querySelectorAll('label ul');
        uls.forEach(function(ul){
            ul.style.bottom=height;
        });
        //textareas set height
        textareas.forEach(function(textarea){
            textarea.style.height=height;
        });
        //inputs set height
        inputs.forEach(function(input){
            input.style.height=height;
            input.style.width=width;
        });
        //show_hide_btn set height
        show_hide_btn.style.height=document.querySelector('.buttons_place').offsetHeight+'px';
    };

    show_hide_btn_click=function(btn)
    {
        if(btn.style.transform==='')
        {
            document.querySelector('.buttons_place').style.transform='translateX('+document.querySelector('.buttons').offsetWidth+'px)'
            btn.style.transform='rotateY(180deg)';
            setTimeout(function()
            {
                btn.style.borderTopLeftRadius='0';
                btn.style.borderBottomLeftRadius='0';
                btn.style.borderTopRightRadius='10px';
                btn.style.borderBottomRightRadius='10px';
            }, 750);
        }
        else
        {
            document.querySelector('.buttons_place').style.transform='';
            btn.style.transform='';
            setTimeout(function()
            {
                btn.style.borderTopLeftRadius='';
                btn.style.borderBottomLeftRadius='';
                btn.style.borderTopRightRadius='';
                btn.style.borderBottomRightRadius='';
            }, 750);
        }
    };

    ul_click=function(where, value)
    {
        where.querySelector('input').value=value;
    };

    create_ul=function(where, names_to_show)
    {
        var ul=where.querySelectorAll('ul');
        if(ul!=null)
        {
            ul.forEach(function(ul_one_object)
            {
                where.removeChild(ul_one_object);
            });
        }
        if(names_to_show.length!=0)
        {
            ul=document.createElement('ul');
            names_to_show.forEach(function(name)
            {
                var li=document.createElement('li');
                li.textContent=name;
                ul.appendChild(li);
            });
            ul.addEventListener('click', function(ev){ul_click(where, ev.target.textContent);}, false);
            ul.style.bottom=document.querySelector('.to_all .to_all').offsetHeight+'px';
            where.appendChild(ul);
        }
    };

    menage_ul=function(label, value)
    {
        var names_to_show=user_names.filter(function(name){
            return name.indexOf(value)==0;
        });
        create_ul(label, names_to_show)
    };

    set_up=function()
    {
        var show_hide_btn=document.querySelector('.button.show_hide_menu');
        show_hide_btn.addEventListener('click', function(event){show_hide_btn_click(show_hide_btn);}, false);
        var width=document.body.offsetWidth;
        setInterval(function()
        {
            if(width!=document.body.offsetWidth)
            {
                width=document.body.offsetWidth;
                set_size();
            }
        }, 500);
        set_size();
        var add_new_line_btn=document.querySelector('.new_line');
        add_new_line_btn.addEventListener('click', new_line, false);
        var add_new_cubes_btn=document.querySelector('.new_cubes');
        add_new_cubes_btn.addEventListener('click', new_cubes, false);
        var restart_btn=document.querySelector('.restart');
        restart_btn.addEventListener('click', restart, false);
        var save_structure_btn=document.querySelector('.save');
        save_structure_btn.addEventListener('click', save, false);
        var to_all_btn=document.querySelector('.to_all .to_all');
        to_all_btn.addEventListener('click', change_all, false);
        var save_as_btn=document.querySelector('.save_as .save_as');
        save_as_btn.addEventListener('click', save_as, false);
        var open_btn=document.querySelector('.open .open');
        open_btn.addEventListener('click', open, false);
        var labels=document.querySelectorAll('label');
        labels.forEach(function(label)
        {
            var input=label.querySelector('input');
            if(input!=null)
            {
                input.addEventListener('keyup', function(ev){menage_ul(label, input.value);}, false);
            }
        });
        on_load();
    };

    set_up();
})();

You can do that with DOMelement.removeEventListener(), see here developer.mozilla.org/en-US/docs/Web/API/EventTarget/… — Carsten Massmann
– Carsten Massmann, Commented Jun 29, 2018 at 9:11
I like how this question got 5 answers explaining the same thing in different ways in less than 15 minutes. — ippi
– ippi, Commented Jun 29, 2018 at 9:28

Vivek · Accepted Answer · 2018-06-29 09:14:37Z

1

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

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).

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

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);
};

answered Jun 29, 2018 at 9:14

Vivek

1,55316 silver badges32 bronze badges

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

6 Comments

Vivek Over a year ago

@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

Zlog Over a year ago

which is variable that I get one conteiner (this is hard to explain please go to link>link)

jannis Over a year ago

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.

Zlog Over a year ago

So could you say me where I need to implement this function if conteiner isn't global

Vivek Over a year ago

@Zlog in that case you've to bind conteiner with click_event_func and use it as parameter in function

|

Daniel Netzer · Accepted Answer · 2018-06-29 09:15:18Z

0

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

answered Jun 29, 2018 at 9:15

Daniel Netzer

2,26218 silver badges22 bronze badges

Comments

Loris · Accepted Answer · 2018-06-29 09:19:01Z

0

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.

answered Jun 29, 2018 at 9:19

Loris

1018 bronze badges

7 Comments

Zlog Over a year ago

Yes, this is correct if conteiner is global variable, but it isn't

Loris Over a year ago

You can simply add a second parameter and pass it. Mine was just an example to exaplain you the problem.

Zlog Over a year ago

Could you write me how to add next parameter, becouse I've tried this:NameHere(event, conteiner).

Zlog Over a year ago

But this was executeing the function ones on implementation :(

Loris Over a year ago

If u do this .addEventListener('click', NameHere(null,conteiner), false); and function NameHere(event,element) , u will have your DOM element into the function.

|

ippi · Accepted Answer · 2018-06-29 09:23:40Z

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.

Collectives™ on Stack Overflow

how to add and than remove eventlistener in JavaScript

4 Answers 4

6 Comments

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related