什麼是不覆蓋window.onresize的其他綁定函數的最佳做法？

我對JavaScript有多深入，我發現自己非常需要。例如，我們有window.onresize事件處理程序，如果我說：什麼是不覆蓋window.onresize的其他綁定函數的最佳做法？

window.onresize = resize; 

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

那不是殺人連接到同一事件的所有其他功能，只是在控制檯登錄我的信息？

如果是這樣，我認爲應該有另一個通知程序告訴我有關窗口大小事件 - 或解決方法 - 也許 - 而不會覆蓋綁定到相同事件的其他函數。

還是我完全被它的使用困惑？

來源

2010-07-26 KakambaWeb

您可以保存舊的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中（如果有的話）。

來源

2010-07-27 00:33:13 Buddy

不錯的一個'好友'謝謝:) – KakambaWeb 2010-07-27 00:41:14

這樣做的一個方法是這樣的：

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

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

或者你也可以使用類似jQuery它包裝所有的東西在一個更簡單的結構：

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

自動處理多個處理程序和你的東西。

來源

2010-07-27 00:08:16

冷靜，感謝您的回答。你有任何線索如何jQuery這樣做，因爲我究竟想要學習的是？ – KakambaWeb 2010-07-27 00:15:25

@KakambaWeb：jQuery的工作方式是保留它自己的「附加」處理程序的內部列表，然後重寫onresize處理程序，其中一個循環遍歷該列表並逐個調用它們。 – 2010-07-27 00:27:20

而不是取代這樣一個包羅萬象的處理程序，你應該只添加一個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); 
}

來源

2013-06-23 11:11:06 Javarome

哇，這是更清潔和靈活。太好了！ – 2016-07-01 16:50:24

什麼是不覆蓋window.onresize的其他綁定函數的最佳做法？

回答

相關問題