CODEWITHSUNDEEP
javascriptevent-listener
Zlog
Zlog

Reputation: 60

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.

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

Upvotes: 3

Views: 275

Answers (4)

ippi
ippi

Reputation: 10167

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.

Upvotes: 0

Loris
Loris

Reputation: 101

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.

Upvotes: 0

Daniel Netzer
Daniel Netzer

Reputation: 2232

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

Upvotes: 0

Vivek
Vivek

Reputation: 1513

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

Upvotes: 1

Related Questions