Thực hành tốt nhất để không ghi đè các hàm ràng buộc khác vào window.onresize là gì?

Question

Tôi khai thác được bao nhiêu JavaScript, tôi thấy mình yêu cầu nhiều. Ví dụ chúng ta có window.onresize xử lý sự kiện và nếu tôi nói:

window.onresize = resize; 

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

Sẽ không có tác dụng diệt tất cả các chức năng khác được kết nối với cùng một sự kiện và chỉ cần đăng nhập thông điệp của tôi trong giao diện điều khiển? Nếu tôi nghĩ rằng cần có một trình thông báo khác cho tôi biết về sự kiện thay đổi kích thước cửa sổ - hoặc một cách giải quyết có thể - không ghi đè các chức năng khác bị ràng buộc vào cùng một sự kiện.

Hoặc tôi hoàn toàn nhầm lẫn với cách sử dụng của nó?

Answer 1

Bạn có thể lưu chức năng onresize cũ và gọi trước hoặc sau hàm thay đổi kích thước tùy chỉnh của bạn. Một ví dụ sẽ hoạt động sẽ giống như sau:

var oldResize = window.onresize; 

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

Phương pháp này có thể có vấn đề nếu có một vài chức năng onresize. Bạn có thể lưu các chức năng onresize cũ như một phần của một đóng cửa và gọi cũ sau khi chức năng của bạn.

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

Khi bạn gọi hàm addResizeEvent, bạn chuyển cho hàm mà bạn muốn đăng ký. Nó có chức năng thay đổi kích thước cũ và lưu trữ nó như oldResize. Khi thay đổi kích thước xảy ra, nó sẽ gọi chức năng của bạn và sau đó gọi chức năng thay đổi kích thước cũ. Bạn sẽ có thể thêm bao nhiêu cuộc gọi tùy thích.

Trong ví dụ này, khi cửa sổ thay đổi kích thước, nó sẽ gọi thanh, sau đó foo, sau đó bất cứ điều gì đã được lưu trữ trong window.resize (nếu có bất kỳ điều gì).

Answer 2

Một cách để làm việc đó là như thế này:

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

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

Hoặc bạn có thể sử dụng giống như jQuery bao bọc tất cả những thứ trong một cấu trúc đơn giản hơn nhiều:

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

Đó tự động xử lý nhiều bộ xử lý và công cụ cho bạn.

Answer 3

Thay vì thay thế một nhận tất cả xử lý như vậy, bạn chỉ nên thêm một DOM 2 listener như thế này:

window.addEventListener("resize", myResizeFunction); 

hoặc biết thêm chi tiết:

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