javascript事件之调整大小(resize)事件
生活随笔
收集整理的這篇文章主要介紹了
javascript事件之调整大小(resize)事件
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
當(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ì)在用戶(hù)停止調(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)事件的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Linux 服务器网卡 IP 配置
- 下一篇: 自由落体时间公式(自由落体公式及推导过程