Javascript 使用jQueryOn和off方法附加和删除选定的事件处理程序

我正在使用JQuery

on

方法将事件处理程序附加到窗口对象：

$(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

方法），以便在调整大小期间，仅触发其中一个事件处理程序

如何识别事件处理程序并删除所需的事件处理程序

谢谢。

试试这个：

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

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

---

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

您可以利用

{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();
        }
    });
});

window.resizeCallbacks=[]；
函数addResizeCallback（键，回调）{
window.resizeCallbacks.push({
钥匙：钥匙，
回调：回调
});
}
函数removeResizeCallback（键）{
var指数=-1；
对于（var i=0；i=0）{
window.resizeCallbacks.splice（索引，1）；
}
}
$（函数（）{
$（窗口）。调整大小（函数（）{
对于（var i=0；i

删除所有

resize

监听器，然后添加一个新的监听器，难道还不够吗？@MCL好吧，为什么$（window）.off（“resize”）是这样呢？@MCL不幸的是，我不能全部删除它们，因为我的功能代码引用了连接事件处理程序的插件实例（三个实例各一个），所以我不确定在我按照你的建议做了之后，我会如何重新分配这份推荐信？@ChuckUgwuh在这种情况下，这是一个艰难的过程。jQuery为提供了功能，但它仅用于调试目的。你仍然可以尝试一下，看看它是如何工作的。无论如何，告诉我们你的插件名称肯定会有帮助。@MCL这是我正在开发的插件，还没有发布。谢谢你的提示。我想我可能必须在插件构造函数中使用命名事件触发器定义，然后使用一个运行一次的定时脚本来附加引用所选触发器的处理程序。一个黑客，但它可能会工作。非常感谢。这非常有帮助，尽管答案中的特定功能已在jQuery1.8中删除。我找到了另一种方法，我很快会把它作为一个答案发布。答案在哪里？很抱歉耽搁了各位。我想我最终使用了

$（window）.off（“resize”）

和一个定时间隔函数，该函数只重新附加了我需要的特定事件处理程序（即1、2或3，具体取决于代码中的某些因素）。幸运的是，我做了重新设计，避免了最初构建的需要。事后看来，这可能不是最好的软件设计。