javascript - 无法从函数中调用removeEventListener

Question

我有以下函数，我想在其中存储与 UI 行为相关的所有 EventListener。

我目前可以毫无问题地添加新事件，但无法删除它们，因为对函数的引用完全丢失。

我相信我可能必须使用.bind(this)或handleEvent，但我无法弄清楚我写的内容是否根本无法在不从头开始的情况下实现这样的目标。

基本上我这样调用函数，并且希望尽可能保持这种方式:

addEventListener : getUIbehaviour('scroll-hide-commentbox', 'add');

removeEventListener : getUIbehaviour('scroll-hide-commentbox', 'remove');

感谢您的帮助，

const pathfinder = (obj, path) =>
{
  let current=obj;
  path.split('.').forEach(function(p){ current = current[p]; });
  return current;
};


const getUIbehaviour = (type, action) =>
{

 let behaviours =
{
    'classic-product-search':
    {
        behaviour: function()
        {

            if (window.GLOBAL.agent === 'Desktop')
            {
                document.querySelector('#product-search').focus();
                window.scroll({top: 0, left: 0, behavior: 'smooth' });
                document.querySelector('#product-search').value = '';
            }
            else if(window.GLOBAL.agent === 'Mobile') /* hide #products-ui on #product-search focus */
            {
                document.querySelector('#product-search').focus();
                document.querySelector('#products-ui').setAttribute('class', 'list noselect hidden');
                window.scroll({top: 0, left: 0, behavior: 'smooth' });
                document.querySelector('#product-search').value = '';
            }

        },

        add : function()
        {
            document.querySelector('#product-search').addEventListener('focusin', this.behaviour, false);
        },

        remove : function()
        {
            document.querySelector('#product-search').removeEventListener('focusin', this.behaviour, false);
        }

    },

    'scroll-hide-commentbox':
    {
        behaviour: function ()
        {

    console.log('scrolling');

            let commentbox = document.querySelector('#comments');

            if (commentbox != null)
            {
                commentbox.setAttribute('class', 'hidden');
            }

            if (document.documentElement.scrollTop === 0 && window.GLOBAL.agent === 'Desktop' && commentbox != null)
            {
                commentbox.setAttribute('class', 'block');
            }
            else if (window.pageYOffset === 0 && window.GLOBAL.agent === 'Mobile' && commentbox != null)
            {
                commentbox.setAttribute('class', 'block');
            }

        },

        add : function()
        {
         document.addEventListener('scroll', this.behaviour, false);
        },

        remove : function()
        {
         document.removeEventListener('scroll', this.behaviour, false);
        }
    }

};

 let behaviour = pathfinder(behaviours, type);

 if (action ==='add')
 {
   return behaviour.add();
 }
 else if (action ==='remove')
 {
   return behaviour.remove();
 }

 };

Answer 1

您应该做的就是简单地将对象behaviours从函数getUIbehaviour中移出。

问题是每次调用 getUIbehaviour 函数时，它都会创建新的 behaviours 对象

简短的当前版本:

    const pathfinder = (obj, path) => {}; 
    const getUIbehaviour = (type, action) => {
      // Move out from scope
      let behaviours = {};
    };

简短的工作版本:

    const pathfinder = (obj, path) => {};
    let behaviours = {}; 
    const getUIbehaviour = (type, action) => {};

这是一个链接 https://gist.github.com/andrey-ponamarev/392ee55337c3716ff3a55177289bdb7e