移除类添加的事件监听器

Posted 2023-02-26

【中文标题】移除类添加的事件监听器

【英文标题】：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 框架。