• 技术文章 >Web开发 >JavaScript

    js中resize事件是什么

    小妮浅浅小妮浅浅2021-10-29 09:50:12原创6785

    1、当浏览器窗口调整到新的高度或宽度时,会触发resize事件。

    2、在window(窗口)上触发,因此可以通过JavaScript或元素中的onresize特性来指定事件处理程序。

    实例

    /**
     * Created by taozh on 2017/5/6.
     * taozh1982@gmail.com
     */
    var EleResize = {
        _handleResize: function (e) {
            var ele = e.target || e.srcElement;
            var trigger = ele.__resizeTrigger__;
            if (trigger) {
                var handlers = trigger.__z_resizeListeners;
                if (handlers) {
                    var size = handlers.length;
                    for (var i = 0; i < size; i++) {
                        var h = handlers[i];
                        var handler = h.handler;
                        var context = h.context;
                        handler.apply(context, [e]);
                    }
                }
            }
        },
        _removeHandler: function (ele, handler, context) {
            var handlers = ele.__z_resizeListeners;
            if (handlers) {
                var size = handlers.length;
                for (var i = 0; i < size; i++) {
                    var h = handlers[i];
                    if (h.handler === handler && h.context === context) {
                        handlers.splice(i, 1);
                        return;
                    }
                }
            }
        },
        _createResizeTrigger: function (ele) {
            var obj = document.createElement('object');
            obj.setAttribute('style',
                'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;');
            obj.onload = EleResize._handleObjectLoad;
            obj.type = 'text/html';
            ele.appendChild(obj);
            obj.data = 'about:blank';
            return obj;
        },
        _handleObjectLoad: function (evt) {
            this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
            this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize);
        }
    };
    if (document.attachEvent) {//ie9-10
        EleResize.on = function (ele, handler, context) {
            var handlers = ele.__z_resizeListeners;
            if (!handlers) {
                handlers = [];
                ele.__z_resizeListeners = handlers;
                ele.__resizeTrigger__ = ele;
                ele.attachEvent('onresize', EleResize._handleResize);
            }
            handlers.push({
                handler: handler,
                context: context
            });
        };
        EleResize.off = function (ele, handler, context) {
            var handlers = ele.__z_resizeListeners;
            if (handlers) {
                EleResize._removeHandler(ele, handler, context);
                if (handlers.length === 0) {
                    ele.detachEvent('onresize', EleResize._handleResize);
                    delete  ele.__z_resizeListeners;
                }
            }
        }
    } else {
        EleResize.on = function (ele, handler, context) {
            var handlers = ele.__z_resizeListeners;
            if (!handlers) {
                handlers = [];
                ele.__z_resizeListeners = handlers;
     
                if (getComputedStyle(ele, null).position === 'static') {
                    ele.style.position = 'relative';
                }
                var obj = EleResize._createResizeTrigger(ele);
                ele.__resizeTrigger__ = obj;
                obj.__resizeElement__ = ele;
            }
            handlers.push({
                handler: handler,
                context: context
            });
        };
        EleResize.off = function (ele, handler, context) {
            var handlers = ele.__z_resizeListeners;
            if (handlers) {
                EleResize._removeHandler(ele, handler, context);
                if (handlers.length === 0) {
                    var trigger = ele.__resizeTrigger__;
                    if (trigger) {
                        trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize);
                        ele.removeChild(trigger);
                        delete ele.__resizeTrigger__;
                    }
                    delete  ele.__z_resizeListeners;
                }
            }
        }
    }

    以上就是js中resize事件的介绍,希望对大家有所帮助。更多Javascript学习指路:Javascript

    推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

    专题推荐:js resize事件
    品易云
    上一篇:js中load事件如何理解 下一篇:js中scroll事件的两种模式

    相关文章推荐

    • 面试准备:快速学习JS防抖与节流• javascript中JSON.stringify的注意点• js字符串中的三种引号• js盗用构造函数的实现• js将小数转为整数的方法• js小数转为整数的函数• js中load事件如何理解

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网