不将其他绑定函数覆盖到 window.onresize 的最佳做法是什么？答案

【问题标题】：What is the best practice to not to override other bound functions to window.onresize?不将其他绑定函数覆盖到 window.onresize 的最佳做法是什么？
【发布时间】：2011-03-21 08:51:55
【问题描述】：

我对 JavaScript 有多少了解，我发现自己问了这么多。例如，我们有 window.onresize 事件处理程序，如果我说：

window.onresize = resize;

function resize()
{
  console.log("resize event detected!");
}

这不会杀死连接到同一事件的所有其他功能并仅在控制台中记录我的消息吗？

如果是这样，我认为应该有另一个通知程序告诉我窗口调整大小事件 - 或者可能是一种解决方法 - 而不会覆盖绑定到同一事件的其他函数。

还是我完全被它的用法弄糊涂了？

【问题讨论】：

标签： javascript event-handling dom-events

【解决方案1】：

您应该像这样添加 DOM 2 listener，而不是替换这样一个包罗万象的处理程序：

window.addEventListener("resize", myResizeFunction);

或者更详细的：

if (window.addEventListener) {    // most non-IE browsers and IE9
   window.addEventListener("resize", myResizeFunction, false);
} else if (window.attachEvent) {  // Internet Explorer 5 or above
   window.attachEvent("onresize", myResizeFunction);
}

【讨论】：

哇，这更简洁灵活。不错！

【解决方案2】：

您可以保存旧的 onresize 函数并在自定义调整大小函数之前或之后调用它。一个应该工作的例子是这样的：

var oldResize = window.onresize;

function resize() {
    console.log("resize event detected!");
    if (typeof oldResize === 'function') {
        oldResize();
    }
}
window.onresize = resize;

如果有多个 onresize 函数，此方法可能会出现问题。您可以将旧的 onresize 函数保存为闭包的一部分，并在函数之后调用旧的函数。

function addResizeEvent(func) {
    var oldResize = window.onresize;
    window.onresize = function () {
        func();
        if (typeof oldResize === 'function') {
            oldResize();
        }
    };
}

function foo() {
    console.log("resize foo event detected!");
}

function bar() {
    console.log("resize bar event detected!");
}
addResizeEvent(foo);
addResizeEvent(bar);

当您调用 addResizeEvent 时，您向它传递了一个您想要注册的函数。它采用旧的 resize 函数并将其存储为 oldResize。当调整大小发生时，它将调用您的函数，然后调用旧的调整大小函数。您应该可以添加任意数量的调用。

在这个例子中，当一个窗口调整大小时，它会调用 bar，然后是 foo，然后是存储在 window.resize 中的任何内容（如果有的话）。

【讨论】：

当你这样做时，你会失去覆盖函数的上下文。

【解决方案3】：

一种方法是这样的：

function resize() { /* ... */ }

var existing = window.onresize;
window.onresize = function() {
    if (existing) {
        existing();
    }
    resize();
 }

或者你可以使用jQuery 之类的东西，它将所有这些东西包装在一个更简单的结构中：

$(window).resize(function() { /* ... */ });

它会自动为您处理多个处理程序和内容。

【讨论】：

酷，感谢您的回答。你知道 jquery 是如何做到这一点的吗，不知道我真正想学习的是什么？
@KakambaWeb：jQuery 的工作原理是保留它自己的“附加”处理程序的内部列表，然后用一个循环遍历该列表的处理程序覆盖 onresize 处理程序，逐一调用它们。