如何在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);
};

我具有此功能，并且其中包含addEventListener。我知道当我提供以下信息时：function (event){on_click(event, conteiner);}我无法删除此EventListener，但是需要给on_click函数第二个参数。

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

是否可以添加执行on_click的EventListener，然后在EventListener中将其删除？完整代码如下：

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

Answer 1

removeEventListener()方法将删除addEventListener()方法附带的事件处理程序。

Note：：要删除事件处理程序，使用addEventListener()方法指定的函数必须是外部函数，如下面的示例（click_event_func）。

诸如“ 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);
};

Answer 2

如果要将另一个参数传递给事件侦听器，则必须将其绑定到该函数，因为eventlistener仅会传递事件本身（在示例中为click事件）。如果在删除时传递完全相同的参数和相同的函数，则会根据MDN成功删除它。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Answer 3

我认为您的问题是您不使用命名函数。

尝试这样做：

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

问题是，当您尝试删除不使用名称的侦听器时，您将删除与之前添加的功能不同的功能。

Answer 4

例如：

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.

相反：

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

只要引用相同的函数，就可以删除eventListeners。