Jquery中文网 新宝娱乐城官网 www.z5nka.com.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 使用jQuery监听DOM元素大小变化

送彩金的娱乐城新宝娱乐城:使用jQuery监听DOM元素大小变化

发布时间:2016-09-19   编辑:新宝娱乐城官网 www.z5nka.com.cn
jquery中文网为您提供使用jQuery监听DOM元素大小变化等资源,欢迎您收藏本站,我们将为您提供最新的使用jQuery监听DOM元素大小变化资源

起因

新宝娱乐城官网 www.z5nka.com.cn 今天写页面的时候突然有这么个需求,由于父元素(一个DIV)的height是由javascript计算出来的固定的值,而在其中增加了一个多说插件,在用户评论后,子元素(DIV)的height属性增加,导致子元素溢出。但是又不知道如何为多说的评论按钮增加回调函数,于是乎就想到了根据子元素的大小变化来重新计算父元素的height。

onresize?

平常,都是在整个浏览器窗口变化时触发一个修改布局的回调函数。使用的是window对象的resize事件,利用:

window.onresize = callback;

来绑定。但根据resize事件的target是defaultView (window),这里详见MDN的resize文档,也就是说只有window对象有resize事件,于是乎就想到使用jquery自己的事件机制来模拟一个普通元素上的resize事件

使用jQuery事件的实现思路

可以想到一种比较简单的方式:
1. 在元素绑定resize对象时,记录元素的width和height
2. 使用requestAnimationFrame、setTimeout、setInterval,每隔一段时间查询其width和height,如果和记录的width和height不一样,运行回调函数并更新记录中的width为height

jQuery插件

这个功能Ben Alman编写了一个jQuery插件,这是传送门
该插件的代码(核心部分),详细代码请查看Ben Alman博客的内容:

(function($, window, undefined) {
  var elems = $([]),
    jq_resize = $.resize = $.extend($.resize, {}),
    timeout_id,
    str_setTimeout = 'setTimeout',
    str_resize = 'resize',
    str_data = str_resize + '-special-event',
    str_delay = 'delay',
    str_throttle = 'throttleWindow';
  jq_resize[str_delay] = 250;
  jq_resize[str_throttle] = true;
  $.event.special[str_resize] = {
    setup: function() {
      if (!jq_resize[str_throttle] && this[str_setTimeout]) {
        return false;
      }
      var elem = $(this);
      elems = elems.add(elem);
      $.data(this, str_data, {
        w: elem.width(),
        h: elem.height()
      });
      if (elems.length === 1) {
        loopy();
      }
    },
    teardown: function() {
      if (!jq_resize[str_throttle] && this[str_setTimeout]) {
        return false;
      }
      var elem = $(this);
      elems = elems.not(elem);
      elem.removeData(str_data);
      if (!elems.length) {
        clearTimeout(timeout_id);
      }
    },
    add: function(handleObj) {
      if (!jq_resize[str_throttle] && this[str_setTimeout]) {
        return false;
      }
      var old_handler;
      function new_handler(e, w, h) {
        var elem = $(this),
          data = $.data(this, str_data);
        data.w = w !== undefined ? w : elem.width();
        data.h = h !== undefined ? h : elem.height();
        old_handler.apply(this, arguments);
      }
      if ($.isFunction(handleObj)) {
        old_handler = handleObj;
        return new_handler;
      } else {
        old_handler = handleObj.handler;
        handleObj.handler = new_handler;
      }
    }
  };

  function loopy() {
    timeout_id = window[str_setTimeout](function() {
      elems.each(function() {
        var elem = $(this),
          width = elem.width(),
          height = elem.height(),
          data = $.data(this, str_data);
        if (width !== data.w || height !== data.h) {
          elem.trigger(str_resize, [data.w = width, data.h = height]);
        }
      });
      loopy();
    }, jq_resize[str_delay]);
  }
})(jQuery, this);

jQuery为jQuery插件的开发者提供了添加自定义事件的接口,详细可以参考jQuery官方文档,这里就是典型的jQuery自定义事件添加方式,其中有三个钩子:
1. setup:The setup hook is called the first time an event of a particular type is attached to an element.首次绑定时执行,如果返回 false,使用默认方式绑定事件
2. teardown:The teardown hook is called when the final event of a particular type is removed from an element.若指定该方法,其在移除事件处理程序(removeEventListener)前执行,如果返回 false,移除默认绑定事件
3. add:Each time an event handler is added to an element through an API such as .on(), jQuery calls this hook.每一次给元素绑定事件,都会执行这个方法

setup、teardown和add三个钩子,每个钩子最先做的事都是检测是否该对象为window对象,然后根据window对象特殊处理,因为window对象本身有resize事件

从setup钩子可以看到,在初始化整个事件处理时,创建一个元素队列,队列中的每隔元素都把width和height放在data中,然后每隔250ms启动loopy函数,在loopy函数中判断是否变化,如果有变,触发回调函数并更新data中的width和height

从teardown钩子可以看到,在元素移除事件时,只需要将元素从元素队列移除,并清除元素中的data数据。如果是元素队列中的最后一个元素,则不再继续执行loopy

add钩子中,对回调函数进行了包装

由此可以看到一个简单的jQuery自定义函数的实现机制

您可能感兴趣的文章:
jQuery的运行机制和设计理念分析
网站如何做到完全不需要jQuery也可以满足简单需求
jQuery 事件的命名空间简单了解
jQuery 性能优化指南(2)
jquery ready函数源代码研究
不要使用jQuery触发原生事件的方法
jquery中的事件处理详细介绍
autoIMG 基于jquery的图片自适应插件代码
jQuery中的.bind()、.live()和.delegate()之间区别分析
JQuery UI的拖拽功能实现方法小结

[关闭]
  • 如果浮躁,不妨读读铁路人坚守的故事 2018-12-11
  • 来看!十九大报告梳理哪家内容强 构思妙 2018-12-11
  • 大换血!勇士8人合同到期 若处理不好将影响霸主地位 2018-12-11
  • 美帝拉拢人民,才能反对共产党。 2018-12-10
  • 粽情粽意 传承文明———我们的节日2018端午节 2018-12-10
  • 都昌一代课教师无证上岗体罚学生? 县教体局称将辞退 2018-12-10
  • 四川乐山公开审理新型贩毒案 2018-12-09
  • 石泉男子独自养大两闺女 照料瘫痪老爸18年 2018-12-09
  • 星战外传再起——关于《游侠索罗》你应该知道的N件事 2018-12-08
  • 政坛当都大嘴巴战场啊?条条大路通大道! 2018-12-08
  • (原创)穿救生衣应成赛龙舟的标配 2018-12-08
  • 网友给四川省委书记、省长留言获回复 共计86条 2018-12-07
  • 建设工程质量管理条例 2018-12-07
  • “大地飞歌·2017”将于9月12日唱响 韩磊谭维维等加盟 2018-12-06
  • 三江源通天河流域发现两千年前岩画 2018-12-06
  • 468| 229| 38| 399| 59| 588| 498| 525| 721| 620|