欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS如何監(jiān)聽div的resize事件詳解

 更新時間：2020年12月03日 16:36:53   作者：zhtui  
這篇文章主要給大家介紹了關(guān)于JS如何監(jiān)聽div的resize事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

需求

開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個div的size變化。
比如我用canvas繪制了一個chart，當(dāng)canvas的size發(fā)生變化的時候，需要重新繪制里面的內(nèi)容，這個時候就需要監(jiān)聽resize事件做處理。

window上雖然可以添加resize事件監(jiān)聽，但這并不能滿足我們的需求，因為很多時候，div的size發(fā)生了變化，但是window的size并沒有改變。

不過我們可以間接利用window的resize事件監(jiān)聽來實現(xiàn)對于某個div的resize事件監(jiān)聽，請看下面具體實現(xiàn)。

對于div的resize事件的監(jiān)聽，實現(xiàn)方式有很多，比如周期性檢查，通過scroll事件等等，本文主要介紹通過object元素來實現(xiàn)監(jiān)聽。

具體實現(xiàn)

/**
 * 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;
   }
  }
 }
}

測試代碼：

<!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>

原理

這里的具體實現(xiàn)分兩類，

  • ie9-10

　　　　默認(rèn)支持div的resize事件，可以直接通過div.attachEvent('onresize', handler);的方式實現(xiàn)

  • 其它瀏覽器

　　　　通過在div中添加一個內(nèi)置object元素實現(xiàn)監(jiān)聽。

　　　　設(shè)置object元素的style使其填充滿div，這樣當(dāng)div的size發(fā)生變化時，object的size也會發(fā)生變化。

　　　　然后監(jiān)聽object元素的contentDocument.defaultView(window對象)的resize事件。

注：本文提供的是如何監(jiān)聽resize事件，其實在resize時，可能會連續(xù)快速的觸發(fā)(比如拖動瀏覽器)，為了提高效率，可以考慮使用批處理的模式。

到此這篇關(guān)于JS如何監(jiān)聽div的resize事件的文章就介紹到這了,更多相關(guān)JS監(jiān)聽div的resize事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JS中定時器的使用及頁面切換時定時器無法清除問題的解決辦法

    JS中定時器的使用及頁面切換時定時器無法清除問題的解決辦法

    定時器相信大家應(yīng)該都不陌生,下面這篇文章主要給大家介紹了關(guān)于JS中定時器的使用及頁面切換時定時器無法清除問題的解決辦法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • js帶縮略圖的圖片輪播效果代碼分享

    js帶縮略圖的圖片輪播效果代碼分享

    這篇文章主要介紹了js帶縮略圖的圖片輪播效果，圖片輪播效果特別適合做產(chǎn)品展示，感興趣的小伙伴可以參考下。
    2015-09-09
  • JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題

    JS解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題

    下面小編就為大家?guī)硪黄狫S解決IOS中拍照圖片預(yù)覽旋轉(zhuǎn)90度BUG的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • echarts控制x軸和y軸name位置并加軸箭頭代碼示例

    echarts控制x軸和y軸name位置并加軸箭頭代碼示例

    搞數(shù)據(jù)展示,很多朋友都會用到免費的echarts,下面這篇文章主要給大家介紹了關(guān)于echarts控制x軸和y軸name位置并加軸箭頭的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • js中點擊空白區(qū)域時文本框與隱藏層的顯示與影藏問題

    js中點擊空白區(qū)域時文本框與隱藏層的顯示與影藏問題

    文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標(biāo)點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下
    2013-08-08

    • 最新評論