How to use the resize event in js

This article mainly introduces how to use the resize event in js, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article.

1. The resize event is triggered when the browser window is adjusted to a new height or width.

2. Triggered on the window, so you can specify the event handler through the JavaScript or the onresize attribute in the element.

Example

/ * Created by taozh on 2017-5-6. * taozh2982@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; iTunes +) {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; iTunes +) {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'); 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;} Thank you for reading this article carefully. I hope the article "how to use resize events in js" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!