javascript事件之調整大小(resize)事件

當瀏覽器窗口被調整到一個新的高度或寬度時，就會觸發resize事件。

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
EventUtil.addHandler(window, "resize", function () {
    alert("Resized");
});

而IE則未提供任何屬性關於何時會觸發resize事件，不同瀏覽器有不同的機制。IE、Safari、Chrome和Opera會在瀏覽器窗口變化了1像素時就觸發resize事件，然后隨着變化不斷重復觸發。
Firefox則只會在用戶停止調整窗口大小時才會觸發resize事件。

由於存在這個差別，應該注意不要在這個事件的處理程序中加入大計算量的代碼，因為這些代碼有可能被頻繁執行，從而導致瀏覽器反映明顯變慢。
瀏覽器窗口最大化時也會觸發resize事件。

 

注意：該事件會觸發兩次，比如瀏覽器全屏顯示,如果使用screen.availHeight重布局屏幕會閃兩次,因為resize方法會進2次.而且每次screen.availHeight都不一樣.

解決辦法：設置延遲

window.onresize = function() {
        var res;
        if (res){clearTimeout(res)}
        res = setTimeout(function(){console.log("resize triggered");},20);
    };