您好,登錄后才能下訂單哦!
本篇文章為大家展示了div標(biāo)簽的resize事件怎么利用JavaScript進(jìn)行監(jiān)聽,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
/** * 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; 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; } } } }
測(cè)試代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Resize</title> <script src="./EleResize.js"></script> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #resizeDiv { width: 60%; height: 60%; border: 1px solid red; margin: 20px; } button { margin: 20px 20px 0; } </style> </head> <body> <button onclick="addListener()">addListener</button> <button onclick="removeListener()">removeListener</button> <button onclick="resize()">resize</button> <div id="resizeDiv"></div> <script> var resizeDiv = document.getElementById('resizeDiv'); function resize() { resizeDiv.style.width = "200px"; } var listener = function () { console.log("resize"); }; function addListener() { EleResize.on(resizeDiv, listener); } function removeListener() { EleResize.off(resizeDiv, listener) } </script> </body> </html>
這里的具體實(shí)現(xiàn)分兩類,
默認(rèn)支持div的resize事件,可以直接通過div.attachEvent('onresize', handler);的方式實(shí)現(xiàn)
通過在div中添加一個(gè)內(nèi)置object元素實(shí)現(xiàn)監(jiān)聽。
設(shè)置object元素的style使其填充滿div,這樣當(dāng)div的size發(fā)生變化時(shí),object的size也會(huì)發(fā)生變化。
然后監(jiān)聽object元素的contentDocument.defaultView(window對(duì)象)的resize事件。
上述內(nèi)容就是div標(biāo)簽的resize事件怎么利用JavaScript進(jìn)行監(jiān)聽,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。