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

2022-01-15 00:00:00 event-handling javascript dom-events

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

How much I dig into JavaScript, I find myself asking that much. For example we have window.onresize event handler and if I say:

window.onresize = resize;

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

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

Wouldn't that kill all other functions which is connected to the same event and just log my message in console?

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

If so I think there should be another notifier which tells me about window resize event - or a workaround maybe - without overriding other functions which are bound to same event.

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

Or am I totally confused by its usage?

推荐答案

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

You can save the old onresize function and call that either before or after your custom resize function. An example that should work would be something like this:

var oldResize = window.onresize;

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

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

This method can have issues if there are several onresize functions. You could save the old onresize function as part of a closure and call the old one after your function. 

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.当调整大小发生时，它将调用您的函数，然后调用旧的调整大小函数.您应该可以添加任意数量的调用.

When you call addResizeEvent, you pass it a function that you want to register. It takes the old resize function and stores it as oldResize. When the resize happens, it will call your function and then call the old resize function. You should be able to add as many calls as you would like.

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

In this example, when a window resizes, it will call bar, then foo, then whatever was stored in window.resize (if there was anything).

相关文章