javascript - 使用 JQuery on 和 off 方法附加和删除选定的事件处理程序

Question

我正在使用 JQueryon方法将事件处理程序附加到窗口对象：

$(window).on('resize', function(e){
     /** my functional code goes here **/
     e.stopPropagation();
});

这是事件处理程序被多次调用：之所以这样是因为事件处理程序位于 JQuery 插件的初始化部分，所以当有人像这样调用插件构造函数时：

$('selector').myPlugin({settings_1});
$('selector').myPlugin({settings_2});
$('selector').myPlugin({settings_3});

事件处理程序被附加 3 次。

我正在寻找一种方法来识别和停用除 3 个事件处理程序中的一个之外的所有事件处理程序（使用off方法），以便在调整大小期间，只有其中一个会被触发。

如何识别事件处理程序并删除我想要的？

Answer 1

尝试这个：

function myHandler(e){
     /** my functional code goes here **/
     e.stopPropagation();
}

$(window).on('resize', function (e){
    $(window).off('resize', myHandler);
    $(window).on('resize', myHandler);
});

Answer 2

如果您的事件处理程序仅使用 jquery（而不是纯 javascript）附加，请阅读此问题的答案以检查 DOM 元素是否已经具有事件处理程序，并在您的情况下避免重复它。

Answer 3

您可以利用一系列{key, callback}. 像这样的东西：

window.resizeCallbacks = [];

function addResizeCallback(key, callback) {
    window.resizeCallbacks.push({
        key: key,
        callback: callback
    });
}

function removeResizeCallback(key) {
    var index = -1;
    for (var i = 0; i < window.resizeCallbacks.length; i++) {
        if (window.resizeCallbacks[i].key === key) {
            index = i;
        }
    }
    if (index >= 0) {
        window.resizeCallbacks.splice(index, 1);
    }
}


$(function() {
    $(window).resize(function() {
        for (var i = 0; i < window.resizeCallbacks.length; i++) {
            window.resizeCallbacks[i].callback();
        }
    });
});