當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)，就會(huì)觸發(fā)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則未提供任何屬性關(guān)于何時(shí)會(huì)觸發(fā)resize事件，不同瀏覽器有不同的機(jī)制。IE、Safari、Chrome和Opera會(huì)在瀏覽器窗口變化了1像素時(shí)就觸發(fā)resize事件，然后隨著變化不斷重復(fù)觸發(fā)。
Firefox則只會(huì)在用戶停止調(diào)整窗口大小時(shí)才會(huì)觸發(fā)resize事件。

由于存在這個(gè)差別，應(yīng)該注意不要在這個(gè)事件的處理程序中加入大計(jì)算量的代碼，因?yàn)檫@些代碼有可能被頻繁執(zhí)行，從而導(dǎo)致瀏覽器反映明顯變慢。
瀏覽器窗口最大化時(shí)也會(huì)觸發(fā)resize事件。

注意：該事件會(huì)觸發(fā)兩次，比如瀏覽器全屏顯示,如果使用screen.availHeight重布局屏幕會(huì)閃兩次,因?yàn)閞esize方法會(huì)進(jìn)2次.而且每次screen.availHeight都不一樣.

解決辦法：設(shè)置延遲

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

總結(jié)

以上是生活随笔為你收集整理的javascript事件之调整大小(resize)事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。