如何仅删除实例中添加的事件处理程序？

Posted 2023-05-09

【中文标题】如何仅删除实例中添加的事件处理程序？

【英文标题】：How to remove only events handlers added in the instance?

【发布时间】：2014-09-21 03:23:55

【问题描述】：

我有一个 jQuery 插件，它在某些元素上附加事件处理程序。

在插件的销毁方法中，我希望删除这些事件处理程序，但只删除由该插件实例添加的那些。

如果我这样做 .off('.myPlugin'); 它可能会删除由其他插件实例添加的事件处理程序，我不希望这样做。

我问的有可能吗？

【问题讨论】：

你能跟踪你绑定的事件吗？

你的意思是把事件处理函数存储在一个数组中还是什么的？是的。我如何将它传递给 off() ？

@thelolcat 循环遍历数组并调用.off("eventName", eventHandler)

【参考方案1】：

jQuery 具有事件命名空间，可以用于此目的。

您为添加的事件命名，因此可以在不删除其他事件处理程序的情况下删除它们，因此在插件中您将添加所有这样的事件处理程序

$( "p" ).on( 'click.pluginName', function(event) 
    // do stuff on click
);

当您想要删除该点击处理程序时，并且只删除该点击处理程序，而不是其他点击处理程序，您可以这样做

$( "p" ).off( 'click.pluginName');

这通常是在插件中完成的。

文档：jQuery event.namespace

---

如果您需要识别插件的每个实例，您可以使用标志、计数器或其他任何东西。 像这样的东西会起作用

$.fn.plugin = function() 
    var self  = this,
        count = $.fn.plugin.counter++;

    $(this).on('click.pluginName' + count, function() 
        // do stuff on click
    );

    this.destroy = function() 
        self.off('click.pluginName' + count)
    



$.fn.plugin.counter = 0;

---

或其他变体

$.fn.plugin = function(arg) 
    if (arg == 'destroy') 

        var count = $(this).data('count');
        $(this).off('click.pluginName' + count);

    else

        var count = $.fn.plugin.counter++;

        $(this).data('count', count).on('click.pluginName' + count, function() 
            alert('clicked')
        );
    

    return this;


$.fn.plugin.counter = 0;

FIDDLE

【讨论】：

我正在使用命名空间，但所有实例都有相同的命名空间：|

【参考方案2】：

我能想到的唯一方法是为该插件的每个实例生成一个 GUID，然后在绑定和取消绑定事件时将其连接到您的插件名称。