zoukankan      html  css  js  c++  java
  • 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);
        };
  • 相关阅读:
    数据处理之PostgreSQL过程语言学习
    Thinkphp中的assign() 和 display()
    JS截取与分割字符串常用技巧总结
    三种JS截取字符串方法
    十大经典排序算法的JS版
    js时间与毫秒互相转换
    javascript--清除表单缓存
    JS join()和split()方法、reverse() 方法、sort()方法
    JS数组去重的几种常见方法
    CSS样式大全
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/9868413.html
Copyright © 2011-2022 走看看