教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 javascript事件之调整大小(resize)事件

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

发布时间:2015-02-07   编辑:jiaochengji.com
本文介绍下,javascript中resize事件的用法,用它可以调整大小,通过一个实例来体会下resize事件的用法,有兴趣的朋友一起研究下吧。

当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件。
这个事件在window(窗口)上面触发,一次可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序。
 

复制代码 代码示例:
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");
});
 

与其他发生在window上的事件类似,在兼容DOM的浏览器中,传入事件处理程序中的event对象有一个targer属性,值为document;
而IE则未提供任何属性关于何时会触发resize事件,不同浏览器有不同的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件,然后随着变化不断重复触发。
Firefox则只会在用户停止调整窗口大小时才会触发resize事件。

由于存在这个差别,应该注意不要在这个事件的处理程序中加入大计算量的代码,因为这些代码有可能被频繁执行,从而导致浏览器反映明显变慢。
浏览器窗口最大化时也会触发resize事件。

您可能感兴趣的文章:
javascript事件之调整大小(resize)事件
在IE浏览器中resize事件执行多次的解决方法
jQuery日历插件 jQuery Week Calendar
优化jQuery调整屏幕和滚动性能
使用jQuery监听DOM元素大小变化
H5横竖屏检测的方法
jquery中的事件处理详细介绍
javascript键盘鼠标等事件对照表
jQuery源码分析之Event事件分析
jquery下div 的resize事件示例代码

[关闭]
~ ~