移除类添加的事件监听器答案

【问题标题】：Removing event listeners added by class移除类添加的事件监听器
【发布时间】：2018-03-23 06:56:01
【问题描述】：

我想了解如何删除按类添加的事件侦听器，如下所示（删除div#mainMenu 的事件）

我已经尝试了所有可用的方法，但都没有奏效。我也没有在 extJS4.x 版本中看到这个问题，但只在 3.4 版本中。有什么简单的 JS 代码来处理这个吗？

【问题讨论】：

【解决方案1】：

您可以使用 getEventListeners 函数来获取元素的侦听器映射。之后使用 removeEventListener 方法，从元素中删除事件。您可以使用此函数从元素中删除所有事件。

    function removeEventListeners(element, listenerMap) {
        Object.keys(listenerMap).forEach(function (name) {
            var listeners = listenerMap[name];
            listeners.forEach(function (object) {
                element.removeEventListener(name, object.listener);
            });
        });
    }
removeEventListeners(elementRef,getEventListeners(elementRef));

【讨论】：

不是浏览器特有的吗？抱歉，我没有深入了解 JS 世界。我实际上尝试过，但它错误地指出该方法 getEventListeners 不可用。
您使用的是哪种浏览器？
getEventListeners 仅支持 chrome 控制台。
应该是所有浏览器都支持的！

【解决方案2】：

最后，我想出了如何解决这个问题。删除侦听器的方法是转到父 div 组件并在元素上调用 removeAllListeners() 方法。可以使用this.el 在afterRenderHandler 函数中访问该元素，然后调用this.el.parent().removeAllListeners() 以便它删除干扰用户体验的不需要的侦听器。如果确定的侦听器是第 n 级父级（调用该方法 n 次），您可以以链式方式调用父方法。

例如：this.el.parent().parent().removeAllListeners()

如果您有 ID，也可以尝试直接访问该元素，方法是调用：var el = Ext.get('mainMenu'); & 然后调用 el.removeAllListeners();

通过获取与侦听器存在问题的元素的句柄，可以将类似的方法应用于任何其他 JS 框架。

【讨论】：