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

Question

我对JavaScript有多深入了解,我发现自己要求那么多.例如,我们有window.onresize事件处理程序,如果我说:

window.onresize = resize;

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

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

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

或者我完全被它的用法搞糊涂了？

Answer 1

您应该只添加一个DOM 2侦听器,而不是替换这样的catch-all处理程序:

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

Answer 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中的任何内容(如果有的话).

Answer 3

一种方法是这样的:

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

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

或者您可以使用类似jQuery的东西,它将所有内容包装在一个更简单的构造中:

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

这会自动为您处理多个处理程序和内容.