• 技术文章 >Web开发 >JavaScript

    js中resize事件是什么

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

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

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

    实例

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    /**

     * 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防抖与节流• js字符串中的三种引号• js盗用构造函数的实现• js将小数转为整数的方法• js小数转为整数的函数• js中load事件如何理解

    全部评论我要评论

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

  • 取消发布评论
  • 

    Python学习网