无法删除 windows 对象的事件侦听器

我在尝试删除事件监听器时遇到了很多麻烦。

我创建了一个非常依赖 JavaScript 的网站。当您在网站上导航时，它基本上是动态加载元素，而无需使用模板文字刷新页面。

有时我必须加载内容并添加无限滚动，但也能够再次删除该事件。

这是我用来处理滚动事件的代码：

var start  = 30;
var active = true;

function yHandler(elem)
{

    var oHeight = selectElems('content_main', 'i').offsetHeight;
    var yOffset = window.pageYOffset;
    var hLimit  = yOffset + window.innerHeight;

    if (hLimit >= oHeight - 500 && active === true)
    {

        active = false;
        new requestContent({
            page: GET.page,
            type: returnContentType(GET.page),
            scroll: true,
            start: start
        }, (results) => {
            if(results){
                setTimeout(()=>{
                    active = true;
                    start  = start + 30;;
                }, 400);
                new ContentActive();
            }
        });
    }
}

var scrollRoute = 
    {

    contentScroll: () =>{
        yHandler();
    }
};

var scrollHandler = function(options)
{

    var func = options.func.name;
    var funcOptions = options.func.options;
    var elem = options.elem;
    var flag = options.flag;

    this.events = () => {
        addEvent(elem, 'scroll', ()=>{
            scrollRoute[func](elem, funcOptions);
        }, flag);
    }
    this.clear = () => {
        elem.removeEventListener('scroll', scrollRoute[func](), flag);
    }
}

我正在使用这个函数来设置事件

function addEvent(obj, type, fn, flag = false) {
    if (obj.addEventListener) {
        obj.addEventListener(type, fn, flag);
    } else if (obj.attachEvent) {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function () {
            obj["e" + type + fn](window.event);
        };
        obj.attachEvent("on" + type, obj[type + fn]);
    } else {
        obj["on" + type] = obj["e" + type + fn];
    }
}

当我需要设置无限滚动事件时，我从任何代码调用此代码

new scrollHandler({
    func: {
        'name':'contentScroll',
    },
    elem: window,
    flag: true,
}).events();

当我需要删除无限滚动事件但没有任何运气时，我从任何代码调用此代码

new scrollHandler({
    func: {
        'name':'contentScroll',
    },
    elem: window,
    flag: true,
}).clear();

如何成功删除事件监听器？我不能只命名实例，从长远来看，当从不同的地方设置和删除滚动事件时，这会变得非常混乱。

两个问题：

1. 你必须通过same功能为removeEventListener当你传递到addEventListener。 （同样，您必须将相同的函数传递给detachEvent当你传递到attachEvent使用 Microsoft 的专有内容 - 但除非您确实必须支持 IE8 及更早版本，否则您可以放弃所有这些。）您的代码没有这样做。

2. 当尝试删除处理程序时，您是calling scrollRoute[func]()并将其返回值传递给removeEventListener。据我所知，这已经过去了undefined into removeEventListener，这不会做任何有用的事情。

这是我上面提到的代码：

this.events = () => {
    addEvent(elem, 'scroll', ()=>{               // *** Arrow function you don't
        scrollRoute[func](elem, funcOptions);    // *** save anywhere
    }, flag);                                    // ***
}
this.clear = () => {
    elem.removeEventListener('scroll', scrollRoute[func](), flag);
// Calling rather than passing func −−−^^^^^^^^^^^^^^^^^^^
}

请注意您传递的函数addEvent（这会将其传递给addEventListener) 是一个匿名箭头函数，您不会保存在任何地方，但您传递的函数removeEventListener是的结果calling scrollRoute[func]().

您需要保留对传递的函数的引用addEvent然后通过它same函数到一个将撤消什么的函数addEvent did (removeEvent， 也许？）。或者，再次放弃所有这些，不支持 IE8，并使用addEventListener直接地。

例如：

var scrollHandler = function(options) {
    var func = options.func.name;
    var funcOptions = options.func.options;
    var elem = options.elem;
    var flag = options.flag;
    var handler = () => {
        scrollRoute[func](elem, funcOptions);
    };

    this.events = () => {
        elem.addEventListener('scroll', handler, flag);
    };
    this.clear = () => {
        elem.removeEventListener('scroll', handler, flag);
    };
};

（请注意，我添加了几个缺失的分号，因为您似乎在其他地方使用它们，并且保持了一致的花括号定位。）

或者使用 ES2015 的更多功能（因为您已经在使用箭头函数）：

var scrollHandler = function(options) {
    const {elem, flag, func: {name, options}} = options;
    const handler = () => {
        scrollRoute[name](elem, options);
    };

    this.events = () => {
        elem.addEventListener('scroll', handler, flag);
    };
    this.clear = () => {
        elem.removeEventListener('scroll', handler, flag);
    };
};