• 技术文章 >Web开发 >JavaScript

    js中resize事件是什么

    小妮浅浅小妮浅浅2021-09-29 14:05:04原创597

    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

    专题推荐:js resize事件
    品易云
    上一篇:js中unload事件是什么 下一篇:js中scroll事件的两种模式

    相关文章推荐

    • Node.js中promisify()方法是什么• Node.js丢失上下文this如何理解• js数组元素进行排序• 面试准备:快速学习JS防抖与节流• JS数组如何返回给定条件的首个元素• python和nodejs有什么区别• php xml转换成json的方法• javascript中JSON.stringify的注意点• js字符串中的三种引号• js盗用构造函数的实现• php json提交乱码的解决办法• js将小数转为整数的方法• js小数转为整数的函数• js中load事件如何理解• js中unload事件是什么

    全部评论我要评论

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

  • 取消发布评论
  • 

    Python学习网