Question

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

window.onresize = resize;

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

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

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

或者我对它的用法完全感到困惑？

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

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

自动处理多个处理程序和东西。

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

3 个答案: